Нет провайдера для ChildrenOutletContexts (injectionError)

Я получаю следующую ошибку при использовании 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)

Я создал модуль маршрутизации с Угловым 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>

Что может быть причиной этой ошибки?

Ответы

Ответ 1

Чтобы решить эту проблему, измените эту строку:

imports: [RouterModule.forChild(routes)],

чтобы:

imports: [RouterModule.forRoot(routes)],

Ошибка вызвана тем, что RouterModule.forChild() генерирует модуль, который содержит необходимые директивы и маршруты, но не включает службу маршрутизации. Это то, что RouterModule.forRoot для: он создает модуль, который содержит необходимые директивы, маршруты и службу маршрутизации.

Дополнительная информация в угловых документах: модуль углового модуля.

Ответ 2

import: [RouterModule.forRoot (маршруты)]

Измените эту строку в RoutingModuleclass

Ответ 3

Вы также можете сделать это:

Я создал файл route для разделения всех маршрутов.

Импортируйте свои маршруты в свой модуль следующим образом:

app.route.ts:

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/homeComponent/home.component';
import { ListComponent } from './components/listComponent/list.component';

const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'list', component: ListComponent },
    { path: '', component: ListComponent },
];

export const routing = RouterModule.forRoot(appRoutes);

Теперь в app.module.ts вам нужно импортировать routing:

import { routing } from './app.route';



@NgModule({
  declarations: [
    AppComponent, TestComponent
  ],
  imports: [
    routing,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Меня устраивает.