得到Angular2错误＆＃39;没有路由器的提供商！ （RouterOutlet - ＆gt;路由器）＆＃39;

时间：2015-10-17 13:34:13

标签： angular-routing angular

我使用 Angular2 alpha39和Babel 来转换ES6 JS文件。我没有使用打字稿。

我创建了一个正确显示的组件。我在模板中添加了 router-outlet 。当我运行应用程序时，收到错误消息：

没有路由器提供商！ （RouterOutlet - ＆gt;路由器）

调用堆栈是：

enter image description here

以下是代码片段：

模板：

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

组件文件：

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

6 个答案:

答案 0 :(得分：37)

你必须使用：

  1. 你的bootstrap中的ROUTER_BINDINGS。
  2. 在index.html中。
  3. 如果可能的话使用状态，即＆＃34;员工＆＃34;在大写i.r为＆＃34;员工＆＃34;。 （在alpha 42中我用这种方式解决了一个问题）。

    4. 我希望这肯定能帮助你。

    - UPDATE -

    在释放alpha41之后：

    1. ROUTER_BINDINGS已更改为ROUTER_PROVIDERS。
    2. 路由器别名应采用驼峰式方式。
    3. 对于Router-outler和router-link，您只需在组件注释中的directives属性中导入ROUTER_DIRECTIVES。
    4. Router-link期望该值为路由名称数组。了解更多信息。参考here。

      5. 有关路由的更多信息，请参阅本教程here。

      --- --- UPDATE2

      1. 现在（从alpha-49开始）路由器将导出为ng.router。

      2. （根据alpha-47所有生命周期钩子重命名为。）

        onActivate，onReuse，onDeactivate，canReuse，canDeactivate

        要： -

        routerOnActivate，routerOnReuse，routerOnDeactivate，routerCanReuse，routerCanDeactivate

        3. --- --- UPDATE3

        1. router-link已更改为routerLink

        2. 并将routeconfig属性更改为：

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

          3. - 更新4 -

          更新为ANGULAR2 RC

          在RC中的路由中有很多变化在RC之后，其中一些点我会提到这里可能会帮助某人： -

          1. angular2/router已更改@angular/router （您也可以使用导入@angular/router-deprecated来使用路由的旧功能，但到目前为止我们必须使用@angular/router）。

          2. @RouteConfig已更改为@Routes。

            3. 例如： - 

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

答案 1 :(得分：9)

<强> 2.0.0-alpha.36 (2015-08-31)

  • routerInjectables已重命名为ROUTER_BINDINGS

<强> 2.0.0-alpha.41 (2015-10-13)

  • ROUTER_BINDINGS已重命名为ROUTER_PROVIDERS

使用ROUTER_PROVIDERS

ROUTER_PROVIDERS用于简化路由器的引导。

它包括：

  • RouterRegistry - 已注册路线的集合
  • LocationStrategy = PathLocationStrategy - 按路径匹配

ROUTER_PROVIDERS提供“理智”默认值，除非您需要不同的路线LocationStrategy，否则应使用默认值。

变化： 

bootstrap(DashboardAppComponent);

到： 

bootstrap(DashboardAppComponent, [
  ROUTER_PROVIDERS
]);

来源：

<强> 2.0.0-alpha.38 (2015-10-03)

路由别名需要是CamelCase（技术上是PascalCase）

注意：这已经在Pardeep的＃3

的答案中提到过

如果要通过router-link在模板中包含指向路径的链接，则必须确保路径的别名（即name属性）为PascalCase。

如果您使用计划使用router-link修改路线：

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

然后，您可以在模板中添加以下链接：

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

RouterLink动态插入与路径路径匹配的href。

注意：阅读问题/ pr看起来此更改是为了防止用户将<route-link>绑定与路由网址混淆

来源：

提示：

如果您想简化视图指令，请使用ROUTER_DIRECTIVES

它包括：

  • RouterLink
  • RouterOutlet

<强>更新

在不久的将来，RouterOutlet / <router-outlet>将重命名为RouterViewport / <router-viewport>

来源：

更新2：

  • RouteConfig属性as已重命名为name

来源：

答案 2 :(得分：4)

回答 2016年12月23日（Angular v2.4.1，路由器v3.4.1 - 适用于任何NG v2.x.x +路由器v3.x.x）

我刚刚将三个应用程序从Webpack Starter Seed迁移到 Angular CLI （v1.0.0-beta.24）并遇到了此问题。

只需要NG 2 massive router doc page上的一小部分内容：

app-routing.module.ts文件（通常在src / app /文件夹中），如下所示：

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

将AppRoutingModule 导入主模块（通常是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 { }

确保您的主html（通常为src / app / app.component.html）中的某处<router-outlet></router-outlet> ，因为这是注入路由器内容的地方。

答案 3 :(得分：3)

确保在AppModule中定义并声明了路由器。 示例（查看提到路由的所有位置，忽略其余部分）：

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

和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 {
}

答案 4 :(得分：1)

这可以节省一个小时：

如果你甚至不使用路由，你会得到这个错误（例如临时，也许你没有导入路由配置和路由器插座被注释掉）但是你在一些组件构造函数中通过依赖注入使用Router或ActivatedRoute ，像这样：

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

答案 5 :(得分：1)

如果您没有定义任何路径，则无法为Router使用依赖注入！ 要为路由用户定义类似于以下代码的内容：

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
{
}
相关问题
最新问题