Emmanuel Scarabin Emmanuel Scarabin - 1 year ago 676
TypeScript Question

Angular 2 RC5 : No provider for Router

I am facing an issue using the new Angular 2 RC5 router (router version is RC1).

Here is the log I get from the dev console:

EXCEPTION: Error in /templates/app.component.html:2:0
ORIGINAL EXCEPTION: No provider for Router!

Here is what my app.modules.ts looks like:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app.component';
import { routing } from './app.routes';

declarations: [AppComponent],
imports: [BrowserModule, RouterModule, FormsModule, HttpModule, routing],
bootstrap: [AppComponent],
export class AppModule {}

Here is my boot.ts file:

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


My app.routes.ts file...

import { Routes, RouterModule } from '@angular/router';

// Components
import { HomeComponent } from './components/home.component';

const routes: Routes = [
// Root
{ path: '/', name: 'Home', component: HomeComponent, useAsDefault: true},

// - Updated Export
export const routing = RouterModule.forRoot(routes);

...and my app.component.ts file:

import { Component, ViewContainerRef } from '@angular/core';

selector: 'app',
templateUrl: '/templates/app.component.html'

export class AppComponent {
viewContainerRef: any;

public constructor(viewContainerRef:ViewContainerRef) {
// You need this small hack in order to catch application root view container ref
this.viewContainerRef = viewContainerRef;

Is there something I am missing here?

Answer Source

Inside app.routes.ts file:

Add this import state

import { ModuleWithProviders } from '@angular/core';


export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

This should work.