Angular2 updated to rc5 and @angular/router - ORIGINAL EXCEPTION: No provider for Router
<p>I have updated our project from rc4 -> rc5.  That seems to work fine.
At the same time as doing this, i have also updated our code from using the <code>@angular/router-deprecated</code> to <code>@angular/router</code>.</p>

<p>My application is made up of 2 sections, public and protected (public is for all users, protected is just for admins).  But currently i just want to get 1 route working, then i can fix the other pages.</p>

<p>As i said i have updated all the code, which i believe is correct and the pages load until i add this to my page <code>[routerLink]="['Home']"</code></p>

<p>If i add this, then i get the exception</p>

<blockquote>
  <p>ORIGINAL EXCEPTION: No provider for Router!</p>
</blockquote>

<p>If i comment this line out again, the pages all load fine.</p>

<p>Here is some of my code</p>

<p><strong>app.module.ts</strong></p>

<pre><code>import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';

import { AppRoutes } from './app.routes';
import { AppComponent }  from './app.component';
import { PublicComponent } from './public.component';
//import { ProtectedComponent } from './protected.component';

// cms
import { HomeComponent } from './cms/home.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(AppRoutes)
    ],
    declarations: [
        AppComponent,
        PublicComponent,
        HomeComponent
    ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }
</code></pre>

<p><strong>app.routes.ts</strong></p>

<pre><code>import { PublicComponent } from './public.component';
import { ProtectedComponent } from './protected.component';

// public
import { HomeComponent } from './cms/home.component';


export const AppRoutes = [
    {
        path: '',
        component: PublicComponent,
        children: [
            {
                path: '',
                redirectTo: 'home',
                pathMatch: 'full'
            },
            {
                path: 'home',
                component: HomeComponent
            },
        ]
    },
    // {
    //     path: 'admin/...',
    //     component: ProtectedComponent
    // }
];
</code></pre>

<p><strong>app.component.ts</strong></p>

<pre><code>import { Component, ViewContainerRef } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router'

@Component({
    selector: 'app-root',
    template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;',
    directives: [ ROUTER_DIRECTIVES ]
})

export class AppComponent {
    viewContainerRef: ViewContainerRef;

    constructor(viewContainerRef: ViewContainerRef) {
        this.viewContainerRef = viewContainerRef;
    }
}
</code></pre>

<p><strong>main.ts</strong></p>

<pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
</code></pre>

<p><strong>public.component.ts</strong></p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { CmsService } from './cms/cms.service';
import { ModuleService } from './module/module.service';
import { MenuItem } from './cms/models/menu-item';
import { Settings } from './cms/models/settings';
import { CollapseDirective } from 'ng2-bootstrap/components/collapse';
import { OffClickDirective } from './shared/offclick.directive';

@Component({
    selector: 'public',
    templateUrl: 'app/public.component.html',
    directives: [ ROUTER_DIRECTIVES, CollapseDirective, OffClickDirective ],
    providers: [ CmsService, ModuleService ]
})

export class PublicComponent {
    menu: MenuItem[];
    settings: Settings;
    isCollapsed: boolean = true;

    constructor(
        private cmsService: CmsService,
        private router: Router) {
    }
}
</code></pre>

<p>public.component.html</p>

<pre><code>&lt;div class="navbar navbar-dark bg-inverse navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container"&gt;
        &lt;a class="navbar-brand" [routerLink]="['Home']"&gt;
            &lt;span class="fa fa-home fa-2x" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Home&lt;/span&gt;
        &lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I have tried adding <code>Router</code> to the providers section in <code>public.component.ts</code> but then i get another exception as below.</p>

<blockquote>
  <p>Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?,
  ?)</p>
</blockquote>

<p>I have obviously missed something, but dont know what. Any help would be much appreciated.</p>

<p>Just encase it helps, here are the angular references in my package.json file as well</p>

<pre><code>"dependencies": {
    "@angular/common": "^2.0.0-rc.5",
    "@angular/compiler": "^2.0.0-rc.5",
    "@angular/core": "^2.0.0-rc.5",
    "@angular/forms": "^0.3.0",
    "@angular/http": "^2.0.0-rc.5",
    "@angular/platform-browser": "^2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
    "@angular/router": "^3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "^2.0.0-rc.3"
}
</code></pre>