没有ChildrenOutletContexts的提供者(injectionError)

Question

使用Angular CLI为我的应用程序生成路由模块时出现以下错误:

ERROR Error: No provider for ChildrenOutletContexts!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9481)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10569)
    at resolveDep (core.es5.js:11072)
    at createClass (core.es5.js:10936)

我使用Angular CLI生成了路由模块,如下所示:

ng generate module --routing App

这是路由模块的内容:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponent } from './my/my.component';

const routes: Routes = [
  {
    path: '',
    component: MyComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

这就是我对我的看法app.component.html:

<div class="container" role="main">
    <router-outlet></router-outlet>
</div>

这个错误的原因是什么？

Answer 1

要解决此问题,请更改此行:

imports: [RouterModule.forChild(routes)],

至:

imports: [RouterModule.forRoot(routes)],

导致该错误是因为RouterModule.forChild()生成包含必要指令和路由但不包括路由服务的模块.这就是RouterModule.forRoot:它生成一个包含必要指令,路由和路由服务的模块.

Angular文档中的更多信息:Angular - 路由器模块.

Answer 2

当我没有导入正确的routing模块时，这通常会发生在我身上。

例如：在里面AppModule我RouterModule错误地从 '@angular/router'导入 而不是AppRoutingModule从 './app-routing.module'

当我使用 Angular CLI 时，我信任编译器，所以我仔细检查了自己，在大多数情况下，这是我的错误，所以在生成路由文件和模块时，我确信 Angular 团队做得很好