Angular 2: Can't resolve all parameters for Router
<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>