NullInjectorError:ChildrenOutletContexts没有提供程序

时间:2019-07-06 14:49:17

标签: angular typescript routing stackblitz

我还在学习有角度的知识。我试图在stackblitz上创建一个示例,以问另一个问题,并遇到路由问题。

我正在尝试设置路由。我已将以下内容添加到app.module.ts:

  imports:      [ BrowserModule,
                  FormsModule,
                  RouterModule,

然后创建了app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { NavComponent } from './components/NavComponent';
import { SearchComponent } from './components/SearchComponent';
import { ViewComponent } from './components/ViewComponent';

const routes: Routes = [
  { path: '', redirectTo: '/nav', pathMatch: 'full' },
  { path: 'nav', component: NavComponent },
  { path: 'search', component: SearchComponent },
  { path: 'view', component: ViewComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

,然后将这些导入添加到app.module.ts:

import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

我以为那是我要做的,但是当我加载应用程序时,我得到了:

ERROR
Error: StaticInjectorError(AppModule)[RouterOutlet -> ChildrenOutletContexts]: 
StaticInjectorError(Platform: core)[RouterOutlet -> ChildrenOutletContexts]: 
NullInjectorError: No provider for ChildrenOutletContexts!

我搜索了此错误,发现:No provider for ChildrenOutletContexts (injectionError)Error: No provider for ChildrenOutletContexts,但我认为这些没有帮助。

这是我的闪电战:https://stackblitz.com/edit/angular-j1seie?file=src%2Fapp%2Fapp.module.ts

不知道下一步要去哪里。

1 个答案:

答案 0 :(得分:1)

您只需要在应用模块导入数组中将RouterModule替换为AppRoutingModule。否则,应用程序将不知道您已配置的路由。如果您不熟悉它,那么很容易错过。