Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
669 views
in Technique[技术] by (71.8m points)

angular routing - Getting Angular2 error 'No provider for Router! (RouterOutlet -> Router)'

I use Angular2 alpha39 and Babel to transpile the ES6 JS file. I'm not using typescript.

I created a component which displays correctly. I added a router-outlet to the template. When I run the app, I get the error message:

No provider for Router! (RouterOutlet -> Router)

The call stack is:

enter image description here

Here is the snippet of code:

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);
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

you have to use:

  1. ROUTER_BINDINGS in your bootstrap.
  2. in your index.html.
  3. if possible use state i.e as "employees" in capitalize i.r as "Employees". (in alpha 42 i have solve one problem this way).

i hope this will surely help you.

--UPDATE--

after the relese of alpha41:

  1. ROUTER_BINDINGS has been changed with ROUTER_PROVIDERS .
  2. Router Aliases should be in the camel case manner.
  3. for the Router-outler and router-link you just have to import ROUTER_DIRECTIVES in your directives property in the component annotation.
  4. Router-link expects the value to be an array of route names. for more info. refer here .

for more info regarding Routing you may refer to this tutorial here .

---Update2---

  1. Now ( as of alpha-49) router is exported as ng.router.
  2. (According to alpha-47 all life cycle hooks renamed as.)

    onActivate, onReuse, onDeactivate, canReuse, canDeactivate

    To :--

    routerOnActivate,routerOnReuse,routerOnDeactivate,routerCanReuse,routerCanDeactivate

---Update3---

  1. router-link is changed to routerLink

  2. and routeconfig property changed to:

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

--Update 4 --

UPDATE TO ANGULAR2 RC

There are alot of changes has been made in routing in angular2 after RC some of them points i am going to mention here may help someone :-

  1. angular2/router has been changed with @angular/router (also you can use old functionality of routing using import of @angular/router-deprecated but as of now we have to use @angular/router).

  2. @RouteConfig has been changed with @Routes .

for example :-

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...