Angular 2: cannot resolve all parameters for the router

Question

goal

Get routing without losing common sense.

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> 

Answer 1

Evaluate the senior position now, but I had the same problem, and I just solved it.

The Angular error message 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 introducing Router as a provider and only pasting into the constructor so that you are done:

  @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 am new to angular2, so I cannot give you a detailed reason why!

Answer 2

Here is some code from a personal project that I worked on using Angular 2 RC5 and a working router. I used the information directly from the documentation, so maybe it will be useful for 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 somewhere in your router? In my app.html, I have:

  <router-outlet></router-outlet> 

Answer 3

Since your router socket is in app.component.html , add

 import {ROUTER_DIRECTIVES} from '@angular/router' 

and

 directives: [ROUTER_DIRECTIVES] 

at app.component.ts

I have my setup and it works.

Answer 4

You have work because when you import a module into app.module, the module becomes available for all angular components built into the injector. In other words, importing a module into an application module also means registering the module as a service with a built-in angular injector, making it available to the entire application. In your case

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

"routing" already imports the "RouterModule" in the app.routing.ts file, thereby registering the RouterModule as a service available to the entire application using the angular injector. Therefore, it eliminates the need to provide RouterModule as a service in any of the components.