使用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>
这个错误的原因是什么?
要解决此问题,请更改此行:
原文链接:/angularjs/143988.htmlimports: [RouterModule.forChild(routes)],
至:
imports: [RouterModule.forRoot(routes)],
导致该错误的原因是RouterModule.forChild()生成包含必要指令和路由但不包含路由服务的模块。这就是RouterModule.forRoot的用途:它生成一个包含必要指令,路由和路由服务的模块。
Angular docs中的更多信息:Angular – Router Module。