web-dev-qa-db-fra.com

Aucun fournisseur pour ActivatedRoute - Angular 2 RC5

Après la mise à niveau vers Angular 2 RC5 (de RC4), il semble que je ne puisse plus injecter ActivatedRoute dans mes composants.

EXCEPTION ORIGINALE: Aucun fournisseur pour ActivatedRoute!

Voici le morceau de code pertinent:

import { Component } from '@angular/core';

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

declare var module: {
  id: string;
};

@Component({
  moduleId: module.id,
  selector: 'mds-app',
  templateUrl: 'app.component.html',
  styleUrls: [
      'app.component.css'
  ],
  directives: []
})
export class AppComponent { 

  constructor(private _route: ActivatedRoute) {
    this._route.params.subscribe(params => console.log(_route));
  }
}

et voici mon app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule }  from '@angular/common';
import { Routes, RouterModule }  from '@angular/router';

import { AppComponent }  from './app.component';

import { 
    routing, 
    appRoutingProviders 
} from './app.routing';

@NgModule({
  imports:      [ BrowserModule, CommonModule, RouterModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ appRoutingProviders ]
})
export class AppModule { }

J'ai vérifié l'exemple "Tour of Heroes" et ils font exactement la même chose, il n'y a pas de déclaration de fournisseur pour ActivatedRoute alors que se passe-t-il ici je me demande?

angularangular2-routingangular2-router3
15
Thorsten Westheider

Je parcourais Angular 2 problèmes sur GitHub et j'ai trouvé la solution au problème ci-dessus par pure chance (voir ici ).

Je devais ajouter routing (voir import ci-dessus) à imports dans NgModule, c'est-à-dire.

@NgModule({
  imports:      [ BrowserModule, CommonModule, RouterModule, routing ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ appRoutingProviders ]
})

Semble Angular 2 sont devenus plus confus qu'ils ne l'ont déjà été.

J'espère que cette réponse est utile à quelqu'un, j'étais sur le point de m'arracher les cheveux déjà.

EDIT: À la demande générale, voici un extrait du routing importé (du haut de ma tête, comme je suis en congé cette semaine, faites-le moi savoir dans les commentaires s'il y a des problèmes):

app.routing.ts: 

export routes: Routes = [
   { path: 'sales', component: SalesComponent }
];

export routing = RouterModule.forRoot(routes);

et dans votre app.module.ts vous importeriez ceci comme suit:

import { routing } from 'app.routing'
22
Thorsten Westheider

Si vous obtenez cette erreur dans les tests unitaires, vous devez importer RouterTestingModule

24
techguy2000

J'ai eu cette erreur lors des tests unitaires. Importé RouterTestingModule et utilisé dans mon module de test comme ci-dessous:

  beforeEach(
async(() => {
  TestBed.configureTestingModule({
    declarations: [],
    imports: [
      RouterTestingModule.withRoutes([{ path: 'orders/:id', component: OrdersComponent }])
    ],
    providers: []
  }).compileComponents();
})

);

5
Cüneyt Aliustaoğlu