获取Angular2错误“没有供应商路由器！ （RouterOutlet - ＆GT;路由器）“ [英] Getting Angular2 error 'No provider for Router! (RouterOutlet -> Router)'

问题描述

我使用 Angular2 alpha39和巴贝尔以transpile的ES6 JS文件。我没有使用打字稿。

我创建了正确显示的组件。我添加了一个路由器出口的模板。当我运行的应用程序，我得到错误信息：

否提供商路由器！ （RouterOutlet - >路由器）

调用堆栈是：

下面是code的片段：

模板：

  .... //删除了简洁
＆LT; D​​IV CLASS =contenttext＆GT;
    ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
＆LT; / DIV＆GT;
.... //删除了简洁
 

组件文件：

 进口{组件，视图，引导，OnInit中}从'angular2 / angular2';
进口{RouteConfig，RouterOutlet，RouterLink}从'angular2 /路由器;
进口反映的元数据';
进口'winjs';@零件（{
    选择：仪表盘应用
}）
@视图（{
    templateUrl：../js/dashboard.html'，
    指令：[ContentComponent，FamiliesComponent，RouterOutlet，RouterLink]
}）
@RouteConfig（[
    {路径：'/员工，组成：EmployeesComponent，如：雇员}
]）
类DashboardAppComponent实现的OnInit {
    构造函数（）{
    }    的OnInit（）{
        WinJS.UI.processAll（）。完成（功能（）{
            VAR SPLITVIEW = document.querySelector（SPLITVIEW）WINCONTROL。
            新WinJS.UI._WinKeyboard（splitView.paneElement）;
        }）
    }
}引导（DashboardAppComponent）;
 

解决方案

您必须使用：

1. 在引导ROUTER_BINDINGS。


2. 在您的index.html。


3. 如果可能的使用状态即是员工，在利用I.R为员工。 （在阿尔法42我有解决一个问题，这种方式）。

我希望这一定会帮助你的。

- 更新 -

alpha41的relese后：

1. ROUTER_BINDINGS 已更改为 ROUTER_PROVIDERS 。


2. 路由器别名应在驼峰方式。


3. 路由器 - outler和路由器链接，您只需要输入 ROUTER_DIRECTIVES 在你的指令属性的组件注释。


4. 路由器链接预计值为路线名称的数组。获取更多信息。这里参考。

有关路由方面可参考本教程这里更多信息。

--- UPDATE2 ---

1. 现在，（如α-49）的路由器导出为ng.router。



2. （据阿尔法-47改名为所有的生命周期挂钩。）

   onActivate，onReuse，onDeactivate，canReuse，canDeactivate

   要： -

   routerOnActivate，routerOnReuse，routerOnDeactivate，routerCanReuse，routerCanDeactivate

--- UPDATE3 ---

1. 路由器链路更改为 routerLink




2. 和routeconfig属性更改为：

   {路径：'/ ABC'，分量：ABC，如：'ABC'}
   至：
   {路径：'/ XYZ'，分量：XYZ，名称：'某某'}

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:

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);

解决方案

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'}

这篇关于获取Angular2错误“没有供应商路由器！ （RouterOutlet - ＆GT;路由器）“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！