web-dev-qa-db-fra.com

Angular 2: Impossible de résoudre tous les paramètres du routeur

Objectif

Faites en sorte que le routage fonctionne sans perdre la raison.

Erreur 

Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?)

app.routing.ts 

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

import { NavbarComponent } from './navbar/navbar.component';
import { CustomerComponent } from './customer/customer.component';

export const appRoutes: Routes = [
    { path: '', redirectTo: 'customers', pathMatch: 'full' },
    { path: 'customers', component: CustomerComponent },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts 

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { CustomerComponent } from './customer/customer.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        routing
    ],
    declarations: [
        AppComponent,
        NavbarComponent,
        CustomerComponent,
    ],
    providers: [
        // ...
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
    // ...
}

app.component.ts 

import { RouterLink } from '@angular/router';
import { HTTP_PROVIDERS } from '@angular/http';
import { Component } from '@angular/core';

import { NavbarComponent } from './navbar/navbar.component';
import { CustomerComponent } from './customer/customer.component';

export { Config } from './config/env.config';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    directives: [NavbarComponent, CustomerComponent],
    providers: [HTTP_PROVIDERS, RouterLink]
})
export class AppComponent
{
    constructor() {
        // console.log('Environment config', Config);
    }

    ngOnInit() {
        // ...
    }
}

navbar.component.ts 

import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'navbar',
    templateUrl: 'navbar.component.html',
    styleUrls: ['navbar.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [Router],
})
export class NavbarComponent
{
    version: string;
    versionIsVisible: boolean;

    constructor() {
        this.version = '<%= VERSION %>';
    }

    ngOnInit() {
        // ...
    }
}

app.component.html 

<navbar></navbar>

<router-outlet></router-outlet>

navbar.component.html 

<a routerLink="/customers">Customers</a>
angularangular-routing
8
Donnie

J'apprécie le post plus ancien maintenant mais j'avais le même problème et je viens de le résoudre.

L'erreur indique que Angular ne peut pas résoudre certaines des dépendances de la classe Router.

navbar.component.ts 

import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'navbar',
  templateUrl: 'navbar.component.html',
  styleUrls: ['navbar.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [Router],
})

J'ai résolu ce problème en n'injectant pas Router en tant que fournisseur et en n'injectant que dans le constructeur, ce qui donne:

@Component({
    moduleId: module.id,
    selector: 'navbar',
    templateUrl: 'navbar.component.html',
    styleUrls: ['navbar.component.css'],
    directives: [ROUTER_DIRECTIVES]
  })

  export class NavbarComponent
  {
    version: string;
    versionIsVisible: boolean;

    constructor(private _router: Router) {
      this.version = '<%= VERSION %>';
    }

    ngOnInit() {
      // ...
    }
}

Angular2 étant nouveau pour moi, je ne suis donc pas en mesure de vous en donner la raison détaillée!

8
Craig Cooke

Voici du code d’un projet personnel sur lequel j’ai travaillé en utilisant Angular 2 RC5 et qui utilise des routeurs. J'ai utilisé les informations directement à partir de la documentation, alors cela vous sera peut-être utile.

app.routing.ts 

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../home/home.component';
import { ApprovalsComponent } from '../approvals/approvals.component';

const appRoutes : Routes = [
{
path: 'Home', component: HomeComponent ,
data: { Title: 'Home'}
},
{
path: 'Approvals', component: ApprovalsComponent,
data: { Title: 'My Approvals'} 
}]


export const appRoutingProviders: any[] = [


];

export const routing = RouterModule.forRoot(appRoutes);

app.module.ts 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http'

import { AppComponent }  from './app.component';
import { HomeComponent } from '../home/home.component'
import { ApprovalsComponent } from '../approvals/approvals.component'
import { routing, appRoutingProviders } from './app.routing'

@NgModule({
   imports:      [ BrowserModule, routing, HttpModule, BrowserModule],
   declarations: [ AppComponent, HomeComponent, ApprovalsComponent],
   providers : [appRoutingProviders],
   bootstrap:    [ AppComponent ]
   })

 export class AppModule { }

html for routerlink 

  <a [routerLink]="['Home']">
                    Home
                </a>

Avez-vous déclaré votre sortie de routeur quelque part? Dans mon app.html j'ai: 

 <router-outlet></router-outlet>
1
dev53

Vous avez réussi à le faire car lors de l'importation d'un module dans app.module, le module est disponible pour tous les composants à l'aide de l'injecteur intégré d'angular. En d'autres termes, importer un module dans un module d'application signifie également enregistrer le module en tant que service avec l'injecteur intégré d'angular, le rendant ainsi disponible pour l'ensemble de l'application. Dans ton cas 

@NgModule({
   imports:      [ BrowserModule, routing, HttpModule, BrowserModule],
   declarations: [ AppComponent, HomeComponent, ApprovalsComponent],
   providers : [appRoutingProviders],
   bootstrap:    [ AppComponent ]
   })

"routing" importe déjà "RouterModule" dans le fichier app.routing.ts, enregistrant ainsi RouterModule en tant que service disponible pour toute l'application par l'injecteur d'angular. Ainsi, il n’est plus nécessaire de fournir RouterModule en tant que service dans l’un des composants.

1
Zeeshan Cornelius

Puisque votre sortie de routeur est dans app.component.html add 

import {ROUTER_DIRECTIVES} from '@angular/router'

et

directives: [ROUTER_DIRECTIVES]

dans app.component.ts

J'ai le mien installé comme ça et ça marche.

0
mrinalmech