I'm getting No provider for RouterOutletMap using angular-cli: 1.0.0-beta.10

Question

I’m confused on how to implement routing for angular-cli: 1.0.0-beta.10, using @angular/router 3.0.0-beta.2. I’m getting an error No provider for RouterOutletMap, any help would be very much appreciated.

My code is:

app/app.component.html

<div id="wrapper" class="container-fluid">
  <router-outlet></router-outlet>
</div>

app/app.component.ts

import { Component } from '@angular/core';
import { RegistrationComponent } from './registration/registration.component';
import { WelcomeComponent } from './home/welcome.component';
import { HTTP_PROVIDERS } from '@angular/http';
import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
import { appRoutingProviders } from './app.routes';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [RegistrationComponent, WelcomeComponent, ROUTER_DIRECTIVES],
  providers: [HTTP_PROVIDERS, appRoutingProviders]
})

export class AppComponent {

}

app/app.routes.ts

import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './home/welcome.component';
import { RegistrationComponent } from './registration/registration.component'

 const appRoutes: Routes = [
   { path: '', redirectTo: '/welcome', pathMatch: 'full' },
   { path: 'welcome', component: WelcomeComponent },
   { path: 'registration', component: RegistrationComponent }
 ]

 export const appRoutingProviders: any[] = [

 ];

 export const routing = RouterModule.forRoot(appRoutes);

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent, environment } from './app/';
import { appRoutingProviders } from './app/app.routes';


if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [HTTP_PROVIDERS, appRoutingProviders]);

EXCEPTION

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in http://localhost:4200/app/app.component.html:1:2 ORIGINAL EXCEPTION: No provider for RouterOutletMap! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:4200/vendor/@angular/core/src/facade/exceptions.js:27:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:43:16) at new NoProviderError (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:80:16) at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:786:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:814:25) at ReflectiveInjector_._getByKey (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:777:25) at ReflectiveInjector_.get (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:586:21) at ElementInjector.get (http://localhost:4200/vendor/@angular/core/src/linker/element_injector.js:30:48) at DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:27:70) at DebugAppView.AppView.create (http://localhost:4200/vendor/@angular/core/src/linker/view.js:96:21) ERROR CONTEXT: [object Object]

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-08-16T11:22:33

I don't know if this router version is supposed to work with Angular2 versions before RC.5

In RC.5 this would look like

@NgModule({
  imports:      [ routing ],
  ...
  providers:    [ appRoutingProviders ],
})

For more details see