web-dev-qa-db-fra.com

Angular 6 Erreur "NullInjectorError: Aucun fournisseur pour le routeur!"

Je travaille actuellement sur un projet pour lequel l'utilisateur doit remplir un formulaire angulaire, puis l'envoyer à un itinéraire situé dans mon backend pour traiter les données. Le backend est en ASP.NET et j'ai déjà une forme fonctionnelle en HTML qui fonctionne:

<body>
<h2 style="text-align:center">Push notification test</h2>
<form style="align-content:center" action="SendPushNotification" method="post">
    <div>
        <fieldset>
            <legend> Informations </legend>
            <label> Notification name : </label>
            <input name="notificationName" id="notificationName" type="text" value="Bonjour" />
        </fieldset>
        <br />
        <fieldset>
            <label> Server Key : </label>
            <input name="serverKey" id="serverKey" type="text" value="AAAAuTv1XVQ:APA91bHsgOmK-quki_rRehRhON9c_y9INocubgru6_jPePiE_Zt5iVXfJ-XD43RubfIY5WEoIpFEyziByfeNRsoIlpeNi693bGZYfjjb7ULDx23sRzHQcYLCgl7y3vn-K9X8hrmQhw1oY6lSTml2aqzoi8GGBIeZYA" />
        </fieldset>
        <br />
        <fieldset>
            <label> To mobile user : </label>
            <select name="selectMobile" id="selectMobile" style="width:400px" name="mobileUser">
                <option>Select Mobile User</option>
            </select>
        </fieldset>
        <br />
        <fieldset>
            <label> To topic : </label>
            <input name="topicName" id="topicName" type="text" value="news" />
        </fieldset>
        <br />
        <fieldset>
            <label> Message : </label>
            <textarea name="notificationMessage" id="notificationMessage" cols="40" rows="5">Comment tu vas toi ?</textarea>
        </fieldset>
        <br />
        <input type="submit" value="Send Notification" />
    </div>
</form>

Rendu HTML

 enter image description here

Donc, j'essaie de faire la même chose dans Angular 6 avec ce résultat, mais lorsque je veux affecter l'itinéraire "SendNotification" à mon bouton "Envoyer", l'erreur suivante apparaît:

Angular Rendu + Erreur

 enter image description here

notification-form.component.html

<button [routerLink]="['SendNotification']" type="submit" class="btn btn-success" [disabled]="!notificationForm.form.valid">Submit</button>

L'erreur se produit dès que j'ajoute [routerLink] ou un constructeur privé:

 constructor(private router: Router) {}

à mon notification-form.component.ts. J'ai déjà essayé plusieurs solutions comme ajouter HttpClientModule à mon app.module.ts mais rien ne fonctionne.

Y a-t-il quelque chose que je fais mal?

Merci d'avance pour votre temps!

METTRE À JOUR:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { NotificationFormComponent } from './notification-form/notification-form.component';

@NgModule({
  imports: [
BrowserModule,
HttpClientModule,
FormsModule,
RouterModule
],  
declarations: [
AppComponent,
NotificationFormComponent
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }
javascriptasp.netangularfrontend
3
Fenouille

Première importation RouteModule dans app.module.ts

import { RouterModule, Routes } from '@angular/router';

Et utilisez-le comme ci-dessous: (Vous importez seulement RouterModule mais vous devez aussi ajouter forRoot([]).)

imports: [
    RouterModule.forRoot([])
    // other imports here
  ]

Si vous avez des itinéraires, utilisez-les comme ci-dessous. Cet exemple de code de Angular DOC

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

Et dans votre composant principal (app.component.html), ajoutez <router-outlet></router-outlet>

J'espère que ceci vous aidera! 

4
coder

Dans le cas où quelqu'un utilise un ou plusieurs liens npm, voici ce qui se passe:

Dans .angular-cli.json ajouter/remplacer:

"defaults": {
    "styleExt": "css",
    "component": {},
    "build": {
        "preserveSymlinks": true
    }
}
1
user10100968

Pour ceux qui ont également des problèmes, avec les messages d'erreur cryptiques/inutiles du compilateur Angular, assurez-vous de les avoir quelque part:

RouterModule.forRoot([])

Je n'utilisais que RouterModule.forChild([]), l'ajout d'un forRoot () dans l'un des modules a corrigé l'erreur.

0
Ben Winding

Vous devez ajouter un <router-outlet></router-outlet>

La balise <router-outlet></router-outlet> est l'endroit où votre application va rendre les différents itinéraires. Par exemple, dans le fichier app.component.html, vous pouvez avoir:

<header>
    <bt-toolbar></bt-toolbar>
</header>

<main>
    <router-outlet></router-outlet>
</main>

Avec ce modèle, j'ai une barre supérieure toujours visible et en dessous se trouve le contenu des différentes routes.

Ajoutez ceci à votre app.module.ts dans le tableau imports:

RouterModule.forRoot([
      { path: 'SendNotification', component: YourComponent }
0
Juan

Dans mon cas, je ne mets que:

<base href="/">

Dans ma balise head dans le fichier index.html.

...
<head>
  ...
  <title>Name of page</title>
  <base href="/">
</head>
...
0
Wictor Chaves