使用ANGLE 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>

这个错误的原因是什么?

推荐答案

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

imports: [RouterModule.forChild(routes)],

致:

imports: [RouterModule.forRoot(routes)],

导致该错误的原因是,RouterModule.forChild()生成的模块包含必要的指令和路由,而不是doesn't include the routing service.这就是RouterModule.forRoot的用途:它生成一个模块,其中包含必要的指令、路由和路由服务.

更多信息请参阅Angular docs:Angular - Router Module.

Angular相关问答推荐

Goto锚定在嵌套容器中,具有溢出自动

如何避免使用CSS动画制作的幻灯片中闪烁?

有没有一种方法用timeout()操作符创建计数器,用于超时一个观察对象?

Angular中的Bootstrap carousel动态属性

未触发HTTP拦截器

Angular 如何渲染ngFor?

NG-BOOTSTRAPP SCROLLESPY没有高度就不能工作?

ANGLE v16独立组件不能与拦截器一起工作?

除非将 signal.set 作为间隔的一部分调用,否则Angular 信号效果不会执行

无法在单个元素上多次监听同一个事件

Angular2 路由 VS ui-router-ng2 VS ngrx 路由

模块AppModule导入的意外指令LoginComponent,请添加@NgModule 注释

如何在 Angular Cli 中生成 .angular-cli.json 文件?

EmptyError: no elements in sequence

AOT - Angular 6 - 指令 SomeComponent,预期 0 个参数,但go 有 1 个参数

在 Angular 2 中使用逗号作为列表分隔符

动态添加/删除验证器

为什么 ngOnInit 被调用两次?

Angular 4.3 HttpClient:拦截响应

如何在 Angular 中使用 router.navigateByUrl 和 router.navigate