title: Angular 2: Can't resolve all parameters for Router
body: <p><strong>Goal</strong></p>
  
  <p>Get routing working without losing sanity.</p>
  
  <p><strong>Error</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?)
  </code></pre>
  
  <hr>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>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);
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>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 {
      // ...
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>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() {
          // ...
      }
  }
  </code></pre>
  
  <p><strong>navbar.component.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>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 = '&lt;%= VERSION %&gt;';
      }
  
      ngOnInit() {
          // ...
      }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;navbar&gt;&lt;/navbar&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>navbar.component.html</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;a routerLink="/customers"&gt;Customers&lt;/a&gt;
  </code></pre>