title: Angular 2 Router V3 : No provider exception
body: <p>I am migrating the angular router component from deprecated beta to V3 alpa 0.7.</p>
  
  <p>I have setup my <code>main.ts</code> as below</p>
  
  <pre><code>import {bootstrap}    from '@angular/platform-browser-dynamic';
  import {AppComponent} from './component/app.component';
  import {HTTP_PROVIDERS} from '@angular/http';
  import {HttpService} from '../common/service/http.service';
  import {enableProdMode} from '@angular/core';
  import {disableDeprecatedForms, provideForms} from '@angular/forms';
  import {APP_ROUTER_PROVIDERS} from '../routes/auth.routes';
  
  enableProdMode();
  
  bootstrap(AppComponent,[
  APP_ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  HttpService,
  disableDeprecatedForms(),
  provideForms()
  ]).catch(err =&gt; console.error(err));
  </code></pre>
  
  <p>And <code>auth.routes.ts</code> is as below</p>
  
  <pre><code>import { provideRouter,RouterConfig } from '@angular/router';
  
  //Import components
  import {LoginComponent} from '../auth/component/login.component';
  import {LogoutComponent} from '../auth/component/logout.component';
  import {RegisterComponent} from '../auth/component/register.component';
  import {ForgotpasswordComponent} from '../auth/component   /forgotpass.component';
  import {ResetpasswordComponent} from '../auth/component/resetpass.component';
  
  export const routes: RouterConfig = [
  {path:'user', redirectTo: '/user/login', terminal: true},
  {path:'user/login', component: LoginComponent},
  {path:'user/logout', component: LogoutComponent},
  {path:'user/register', component: RegisterComponent},
  {path:'user/register/admin', component: RegisterComponent},
  {path:'user/register/librarytrial', component: RegisterComponent},
  {path:'user/forgotpass', component: ForgotpasswordComponent},
  {path:'user/forgotpass/:reset_code', component: ResetpasswordComponent}
  ];
  
  export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
  ];
  </code></pre>
  
  <p>This should work but for some reason it produces following exception:</p>
  
  <pre><code>platform-browser.umd.js:2311 Error: Uncaught (in promise): No provider for Router!
  at l (zone.min.js:1)
  at zone.min.js:1
  at e.invoke (zone.min.js:1)
  at Object.onInvoke (core.umd.js:9004)
  at e.invoke (zone.min.js:1)
  at e.run (zone.min.js:1)
  at zone.min.js:1
  at e.invokeTask (zone.min.js:1)
  at Object.onInvokeTask (core.umd.js:8995)
  at e.invokeTask (zone.min.js:1)
  </code></pre>
  
  <p>The network calls show that it takes me to Login component when i enter the path <code>user</code> as it should but fails after loading the template with the above error.</p>
  
  <p>Here is a short version of the login component</p>
  
  <pre><code>import {Component, OnInit, Input} from '@angular/core';
  import {FormBuilder,Validators,FormControl,FormGroup,REACTIVE_FORM_DIRECTIVES} from '@angular/forms';
  import {ROUTER_DIRECTIVES, Router, ActivatedRoute} from '@angular/router';
  import {ConfigService} from '../../common/service/config.service';
  import {AuthService} from '../service/auth.service';
  
  import {Growl} from 'primeng/primeng';
  import {Message} from 'primeng/primeng';
  
  @Component({
      selector: 'login',
      templateUrl: ConfigService.BASE_URL+'app/auth/views/login.ejs',
      directives: [ROUTER_DIRECTIVES,REACTIVE_FORM_DIRECTIVES,Growl],
      providers:[AuthService,FormBuilder]
  })
  
  export class LoginComponent implements OnInit{
  
  ...
  
  constructor(private _form_builder: FormBuilder, private _auth_service:AuthService, private _router:Router,private _route:ActivatedRoute){
  
      ...
  }
  
  ngOnInit(){
  
      this._route.params.subscribe(params=&gt;{
  
          this.redirect_to = params['redirect_to'];
  
      });
  
  }
  
  }
  </code></pre>
  
  <p>I have also verified that the <code>router-outlet</code> exists in the main component.
  What am i missing?</p>