Angular 2: Can't resolve all parameters for Router

Question

Goal

Get routing working without losing sanity.

Error

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>

you sure you have <router-outlet></router-outlet> in app.component.html? — Pankaj Parkar
– Pankaj Parkar, Commented Sep 7, 2016 at 15:16

camilajenny · Accepted Answer · 2018-08-16 00:09:12Z

Appreciate older post now but I had the same issue and have just resolved it.

The error advises Angular cannot resolve some of the dependencies of the Router class.

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], })

I fixed this by not injecting Router as a provider, and only injecting into the constructor so you end up with:

@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() { // ... } }

I'm new to angular2 so I'm not able to give you a detailed reason why!

I, too, was adding "Router" to the providers array. Remove this parameter. Make the reference in the constructor. That's it.
This worked for me. It doesn't need to be added as a provider, Also in the latest version "ROUTER_DIRECTIVES" is not required
As "RouterModule" is imported in the AppModule no need to specify on each component's provider.

dev53 · Accepted Answer · 2016-09-07 15:07:38Z

Here is some code from a personal project I have worked on using Angular 2 RC5 and that has routers working. I used the information straight from the documentation so maybe it will be helpful to you.

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>

Do you have your router outlet declared somewhere? In my app.html I have:

 <router-outlet></router-outlet>

I modified mine to reflect these changes, but no change in the error. Yes, I do have the <router-outlet> tag in app.component.html.

Zeeshan Cornelius · Accepted Answer · 2017-06-30 16:33:39Z

You got it to work because when importing a module in app.module, the module gets available to all the components by angular's built in injector. In other words importing a module in app module also means registering the module as a service with angular's built in injector hence making it available to the whole application. In your case

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

"routing" is already importing "RouterModule" in app.routing.ts file hence registering RouterModule as a service available to whole application by angular's injector. So it takes away the necessity of providing RouterModule as a service in any of the components.

mrinalmech · Accepted Answer · 2016-09-07 16:27:05Z

Since your router outlet is in app.component.html add

import {ROUTER_DIRECTIVES} from '@angular/router'

and

directives: [ROUTER_DIRECTIVES]

in app.component.ts

I have mine set up like that and it's working.

Thanks, I have implemented this, although it doesn't resolve the error.

Collectives™ on Stack Overflow

Angular 2: Can't resolve all parameters for Router

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Related