Getting Angular2 Error "No Provider for Router! (RouterOutlet & # 8594; Router) '

Question

I use Angular2 alpha39 and Babel to transfer the ES6 ES6 file. I do not use typescript.

I created a component that displays correctly. I added a router output to the template. When I launch the application, I get an error message:

There is no provider for a router! (RouterOutlet → Router)

Call stack:

Here is the code snippet:

template:

.... // Removed for brevity <div class="contenttext"> <router-outlet></router-outlet> </div> .... // Removed for brevity 

Component File:

 import { Component, View, bootstrap, OnInit } from 'angular2/angular2'; import { RouteConfig, RouterOutlet, RouterLink } from 'angular2/router'; import 'reflect-metadata'; import 'winjs'; @Component({ selector: 'dashboard-app' }) @View({ templateUrl: '../js/dashboard.html', directives: [ ContentComponent, FamiliesComponent, RouterOutlet, RouterLink ] }) @RouteConfig([ { path: '/employees', component: EmployeesComponent, as: 'employees'} ]) class DashboardAppComponent implements OnInit { constructor() { } onInit() { WinJS.UI.processAll().done(function() { var splitView = document.querySelector(".splitView").winControl; new WinJS.UI._WinKeyboard(splitView.paneElement); }) } } bootstrap(DashboardAppComponent); 

Answer 1

you should use:

• ROUTER_BINDINGS in your bootstrap.
• in your index.html.
• if possible, use the ie state as "employees" in capizeize ir as "Employees". (in alpha 42 I solve one problem this way).

Hope this helps you.

- UPDATE -

after repeating alpha41:

• ROUTER_BINDINGS changed using ROUTER_PROVIDERS .
• The router aliases must be in camel mode.
• for Router-outler and router-link you just need to import ROUTER_DIRECTIVES into your directive property in the component annotation.
• Router-link expects the value to be an array of route names. for more information. see here .

for more information on routing, you can refer to this tutorial here .

--- Update2 ---

• Now (from alpha-49) the router is exported as ng.router.

• (According to alpha 47, all lifecycle hooks are renamed to.)

  onActivate, onReuse, onDeactivate, canReuse, canDeactivate

  To: -

  routerOnActivate, routerOnReuse, routerOnDeactivate, routerCanReuse, routerCanDeactivate

--- Update3 ---

• Router-link changed to routerLink

• and the routeeconfig property is changed to:

  {path: '/abc', component: ABC, as: 'abc'} so that: {path: '/xyz' , component: XYZ, name: 'xyz'}

- Update 4 -

UPDATE TO ANGULAR2 RC

There are many changes in routing in ANGULAR2 after RC some of which indicate what I mentioned here may help someone: -

• angular2/router was modified using @angular/router (you can also use the old routing functions using the import @angular/router-deprecated , but for now we must use @angular/router ).

• @RouteConfig been modified using @Routes .

eg: -

 @Routes([ {path: '/crisis-center', component: CrisisListComponent}, {path: '/heroes', component: HeroListComponent} ]) 

Answer 2

2.0.0-alpha.36 (2015-08-31)

• routerInjectables been renamed ROUTER_BINDINGS

2.0.0-alpha.41 (2015-10-13)

• ROUTER_BINDINGS been renamed ROUTER_PROVIDERS

USE ROUTER_PROVIDERS

ROUTER_PROVIDERS used to simplify the initial boot of the router.

It includes:

• RouterRegistry - collection of registered routes
• LocationStrategy = PathLocationStrategy - LocationStrategy = PathLocationStrategy Matching

ROUTER_PROVIDERS provides "normal" defaults and should be used unless you need another LocationStrategy route.

Edit:

 bootstrap(DashboardAppComponent); 

To:

 bootstrap(DashboardAppComponent, [ ROUTER_PROVIDERS ]); 

Sources:

• angular / commit / ccfadb9
• angular / pr # 4654

---

2.0.0-alpha.38 (2015-10-03)

Route attributes must be CamelCase (technically PascalCase)

Note: this was already mentioned in Pardeep's answer under No. 3

If you want to include a route link in your template via router-link , you must make sure that the alias (i.e. the name property) of the route is PascalCase.

If you are using a router-link usage plan, change the route to:

 { path: '/employees', component: EmployeesComponent, name: 'Employees'} 

Then you can add the link to your template with:

 <a [router-link]="['/Employees']">Employees Link</a> 

RouterLink dynamically inserts an href that matches the route path.

Note. When reading the / pr problem, this change was made to prevent users from confusing the <route-link> binding with the <route-link> URL

Sources:

• https://groups.google.com/d/msg/angular/IF3_UCJt340/6AgSF76XAwAJ
• angular / issues # 4318
• angular / pr # 4643

Tip:

If you want to simplify view directives, use ROUTER_DIRECTIVES

It includes:

• RouterLink
• RouterOutlet

---

Update:

In the near future, RouterOutlet / <router-outlet> will be renamed to RouterViewport / <router-viewport>

Source:

• angular / issues # 4679

Update 2:

• The RouteConfig as property has been renamed to name

Source:

• angular / commit / 7d83959

Answer 3

Reply for December 23, 2016 (Angular v2.4.1, Router v3.4.1 - should work for any NG v2.xx + Router v3.xx)

I just migrated three of our applications from Webpack Starter Seed samples to the Angular CLI (v1.0.0-beta.24) and hit this problem.

Only a small part of what is on the NG 2 page is the massive page of the document router :

The app-routing.module.ts file (usually in src / app / folder), similar to this sample:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: '', component: YourHomePageComponent }, { path: 'next-page', component: NextComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) export class AppRoutingModule {} 

Import AppRoutingModule into the main module (usually src / app / app.module.ts):

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule // <--- The import you need to add ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

Make sure you have <router-outlet></router-outlet> somewhere in the main html (often src / app / app.component.html), as the contents of the router are entered here.

Answer 4

Make sure the router is defined and listed in the AppModule. Example (see wherever routing is indicated; ignore the rest):

app.routing.ts

 import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HeroesComponent } from './heroes.component'; import {DashboardComponent} from './dashboard.component'; import {HeroDetailComponent} from './hero-detail.component'; const appRoutes: Routes = [ { path: 'heroes', component: HeroesComponent }, { path: 'dashboard', component: DashboardComponent }, { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: 'detail/:id', component: HeroDetailComponent }, ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

and app.module.ts:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; // Imports for loading & configuring the in-memory web api import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard.component'; import { HeroesComponent } from './heroes.component'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroService } from './hero.service'; import { routing } from './app.routing'; import './rxjs-extensions'; import {HeroSearchComponent} from './hero-search.component'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, routing ], declarations: [ AppComponent, DashboardComponent, HeroDetailComponent, HeroesComponent, HeroSearchComponent ], providers: [ HeroService, ], bootstrap: [ AppComponent ] }) export class AppModule { } 

Answer 5

This can save someone an hour:

You get this error if you don’t even use routing (for example, temporary, maybe you are not importing a routing configuration, and the router-exit is commented out), but you use Router or ActivatedRoute in some component constructors through dependency injection, like this:

 @Component({...}}) export class SomeComponent { constructor(private _router: Router, private _route: ActivatedRoute) { //may be you are not using _route/_route at the moment at all! } ... } 

Answer 6

You cannot use Injection for dependencies for Router unless you define any routes! To identify a route user, something similar to the following codes:

 const loginRoutes: Routes = [ {path: 'foo/bar/baz', component: 'MyRootComponent'} ]; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, JsonpModule, RouterModule.forRoot(loginRoutes) ], providers: [], declarations: [ MyLoginComponent ], bootstrap: [ MyLoginComponent ] }) export class MyLoginModule { }