Pas de fournisseur de routeur?

Question

Im obtenir cette erreur:

EXCEPTION: Erreur dans l' ./AppComponent classe AppComponent - inline modèle:0:0 causés par: Pas de fournisseur pour le Routeur!

C'est l'une de mes applications composant:

import {Component} from '@angular/core';
import {LoginComponent} from './login/components/login.component';
@Component({
    selector: 'my-app',
    template: '<login></login>',

})
export class AppComponent {

}

J'ai essayé ceci dans mon application module:

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

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LoginModule,
    RouterModule
  ],
  bootstrap: [AppComponent, RouterModule]

Mais ensuite, j'obtiens cette erreur:

Erreur: Erreur: Pas de Directive annotation trouvé sur RouterModule

J'ai trouvé quelques exemples, mais ils utilisent un routeur obsolète, et je n'ai pas ce dossier. Ai-je besoin que ou quoi? Tout suggstion?

Mise à JOUR:

C'est l'une de mes applications.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';
import { RouterModule } from '@angular/router';
//import 'rxjs/Rx';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LoginModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.composant:

import {Component} from '@angular/core';
import {LoginComponent} from './login/components/login.component';
@Component({
    selector: 'my-app',
    template: '<login></login>',

})
export class AppComponent {

}

Et puis j'ai de la connexion.composant:

import {Component, EventEmitter, Input, OnChanges} from '@angular/core';
import {Observable} from 'rxjs/Rx';
import { LoginService } from '../services/login.service';
import { Login } from '../model/login'
import {Router} from '@angular/router';
@Component({
    selector: 'login',
    templateUrl: 'login-form',

})
export class LoginComponent {
  // Constructor with injected service
      constructor(
          private loginService: LoginService,
          private router: Router
          ){}

      submitLogin(values){

          // Variable to hold a reference of addComment/updateComment
             let loginOperation:Observable<any>;
             loginOperation = this.loginService.Login(values);
             loginOperation.subscribe(
                function(response) { console.log("Success Response" + response)},
                function(error) { console.log("Error happened" + error)},
                function() {
                   console.log("the subscription is completed");
                     this.router.navigate(['/About']);

                 }
            );

           }
}

Peut-être que le problème est dans cette ligne:

 this.router.navigate(['/home']);

C'est mon login.module:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { LoginComponent } from './components/login.component';
import { RouterModule } from '@angular/router';

import { LoginService } from './services/login.service';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
     HttpModule,
    JsonpModule,
    RouterModule  


  ],
  declarations: [
    LoginComponent
  ],

  providers: [
      LoginService
  ],

  exports:[
    LoginComponent
  ]

})
export class LoginModule {
}

Answer 1

S'il vous plaît utiliser ce module

 RouterModule.forRoot(
  [
    { path: "", component: LoginComponent}
  ]
)
 

remplacez simplement votre <login></login> par <router-outlet></router-outlet> thats it

Answer 2

La réponse de Babar Bilal a probablement fonctionné parfaitement pour les versions antérieures Angular 2 alpha / beta. Cependant, toute personne résolvant ce problème avec la version angulaire v4 + voudra peut-être plutôt essayer d’apporter la modification suivante à sa réponse (en englobant la route unique dans le tableau requis):

 RouterModule.forRoot([{ path: "", component: LoginComponent}])
 

Answer 3

Rien ne fonctionne à partir de cette bande de roulement. "forRoot" n'aide pas.

Désolé. Triés cela. J'ai réussi à le faire fonctionner par la mise en corriger les "routes" pour ce "forRoot" configuration d'un routeur de routine

import {RouterModule, Routes} from '@angular/router';    
import {AppComponent} from './app.component';

const appRoutes: Routes = [
  {path: 'UI/part1/Details', component: DetailsComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    DetailsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [DetailsService],
  bootstrap: [AppComponent]
})

Peut également être utile (passé un certain temps à réaliser ce) En option itinéraire partie:

const appRoutes: Routes = [
   {path: 'UI/part1/Details', component: DetailsComponent},
   {path: ':project/UI/part1/Details', component: DetailsComponent}
];

Deuxième règle permet d'ouvrir des URLs comme "nom d'hôte/test/UI/part1/Details?id=666" et "nom d'hôte/UI/part1/Details?id=666"

Travaillé comme un frontend developer depuis 2012, mais ne jamais être bloqué dans un tel compliqué chose comme angular2 (j'ai 3 ans d'expérience avec le niveau de l'entreprise ExtJS)

Answer 4

J'ai eu l'erreur de

Aucun fournisseur pour le routeur

Cela se produit lorsque vous essayez de naviguer dans any service.ts

this.router.navigate(['/home']); comme les codes dans les services provoquent cette erreur.

Vous devez gérer la navigation dans vos composants. par exemple: at login.component

 login().subscribe(
        (res) => this.router.navigate(['/home']),
        (error: any) => this.handleError(error));
 

Des erreurs ennuyeuses se produisent lorsque nous sommes novices :)

Answer 5

J'ai eu un attribut routerLink="." à l'une de mes balises HTML qui a causé cette erreur