没有RouterOutletMap的提供者

Question

最新的Angular 2.0.0和最新的angular-cli 1.0.0-beta.14，节点：6.6.0，os：linux x64

我的所作所为：

1）创建新项目

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

2）添加简单路由

/src/app/app.component.html

 <router-outlet></router-outlet>

/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中的提供程序，异常不要抛出，但app不会重定向到项目并且不显示嵌套组件

Answer 1

您需要为应用模块调用<?php namespace app\views\layouts\main\assets; use yii\web\AssetBundle; class ThemeAsset extends AssetBundle { public $sourcePath = '@theme'; public $css = [ 'css/site.css', ]; public $publishOptions = [ "only" => [ "css/*", "images/*", ], 'except' => [ "doc/", "img/", ], "forceCopy" => YII_DEBUG, ]; } ，而不是RouterModule.forRoot。前adds all the core providers，而the latter doesn't。您应该将forChild用于子模块，而不是app模块。

Answer 2

我也遇到过这个问题。这就是我如何避免这种情况.....有时候这会有所帮助。 祝福！

路由数组 - app.routes.ts

const appRoutes:Routes =[
 {
   path: 'home',
   component: CarouselComponent
 },
 {
  path: 'profile',
  component:UserDashboardComponentComponent,
  children: [
     {
      path: 'overview',
      component: ProfileOverviewComponent
     },
     {
      path: 'post',
      component: PostAddComponent
     }
    ]
   }
];

 export const WebRouting: ModuleWithProviders =RouterModule.forRoot(appRoutes); 

<强> app.module.ts

@NgModule({
 declarations: [
  AppComponent,
  CarouselComponent,
  .......
],
 imports: [
  BrowserModule,
  MdTabsModule,
  MaterialModule,
  MdInputModule,
  BrowserAnimationsModule,
  FormsModule,
  HttpModule,
  WebRouting
],
 providers: [],
 bootstrap: [AppComponent],
})

export class AppModule { }

<强> tempale.html

  <li>
    <a [routerLink]="['/profile/overview']" routerLinkActive="active" > 
      Overview
    </a>
  </li>
  <li>
    <a [routerLink]="['/profile/post']"routerLinkActive="active">
      PostAdd
    </a>
  </li>