ChildrenOutletContext에 대한 공급자 없음(injectionError)

ChildrenOutletContext에 대한 공급자 없음(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)

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()는 필요한 지시어와 경로를 포함하지만 라우팅 서비스는 포함하지 않는 모듈을 생성합니다.저것은RouterModule.forRootis for: 필요한 지시어, 경로 및 라우팅 서비스를 포함하는 모듈을 생성합니다.

Angular 문서: Angular - Router Module에서 자세한 내용을 확인할 수 있습니다.

이 문제는 일반적으로 내가 정확하게 가져오지 않았을 때 발생합니다.routing모듈.

예: 내부AppModule수입했습니다RouterModule실수로 '@router/angular'에서 대신AppRoutingModule.app-routing.module'에서

Angular CLI로 작업할 때 컴파일러를 신뢰하기 때문에 스스로를 다시 확인하고 대부분의 경우에는 제가 잘못했기 때문에 모듈과 함께 라우팅 파일을 생성하는 것에 있어서 Angular 팀이 잘 하고 있다고 확신합니다.

가져오기: [RouterModule.forRoot(경로)]

라우팅 모듈 클래스에서 이 줄 변경

다음 작업도 수행할 수 있습니다.

내가 만든 것은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 { }

저한테는 효과가 있어요.

언급URL : https://stackoverflow.com/questions/46108581/no-provider-for-childrenoutletcontexts-injectionerror