没有RouterOutletMap的提供者 [英] No provider for RouterOutletMap

问题描述

1)创建新项目

ng new angular-test
ng g component projects
ng g component typings

2)添加简单的路由

/src/app/app.component.html

/src/app/app.component.html

 <router-outlet></router-outlet>

/src/app/app.module.ts

/src/app/app.module.ts

export const ROUTES: Routes = [
  {
    path: '',
    redirectTo: '/projects',
    pathMatch: 'full'
  },
  {
    path: 'projects',
    component: ProjectsComponent,
  },
  {
    path: '/typings',
    component: TypingsComponent
  },
  {
    path: '**', redirectTo: ''
  }
];

@NgModule({
  declarations: [
    AppComponent,
    ProjectsComponent,
    TypingsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forChild(ROUTES)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我得到的东西:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:0 caused by: No provider for RouterOutletMap!
ORIGINAL EXCEPTION: No provider for RouterOutletMap!

我尝试将RouterOutletMap添加到AppModule的提供程序中，不会抛出异常，但是应用程序不会重定向到项目并且不显示嵌套组件

I tried to add RouterOutletMap to providers in AppModule, exception don't throw, but app don't redirect to projects and don't show nesting components

推荐答案

您需要为应用模块而不是forChild调用RouterModule.forRoot.前一个添加了所有核心提供商 ，而后者没有 .您应该将forChild用于子模块，而不是应用程序模块.

You need to call RouterModule.forRoot for the app module, not forChild. The former adds all the core providers, while the latter doesn't. You should use forChild for child modules, not the app module.

这篇关于没有RouterOutletMap的提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！