没有 ChildrenOutletContexts Angular 的提供者 - TypeScript

当在Angular应用程序中使用路由时，你可能会遇到这样的错误：“没有 ChildrenOutletContexts Angular 的提供者”。

这通常发生在使用带有带有子模块的路由时。子模块中的路由需要知道它们在父级中的位置，并将其传递给父级。

这个错误的解决方法是通过在父级和子级模块中添加导入来解决。以下是如何解决这个错误的步骤：

步骤1

在子模块中添加导入，并且导出 RouterModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  exports: [
    RouterModule
  ]
})
export class ChildModule { }

步骤2

在父级模块中添加导入，导入 RouterModule 和 ChildModule 并将其添加到 @NgModule 的 imports 数组中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ChildModule } from './child/child.module';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    ChildModule
  ],
  declarations: [
    ParentComponent
  ]
})
export class ParentModule { }

步骤3

确保在AppModule中导入父级模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ParentModule } from './parent/parent.module';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([]),
    ParentModule // make sure to import parent module
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

结论

通过这些步骤，就可以解决“没有 ChildrenOutletContexts Angular 的提供者”错误。这个错误通常是由于路由不知道在父级中的位置而引起的。因此，将子模块导入父模块和RouterModule可以帮助解决这个问题。