Question

我有一个根AppModule，其中包含以下路由（从AppRoutingModule导入）：

const routes:Routes = [
    {path:'', redirectTo:'/home', pathMatch:'full'},
    {path:'home', loadChildren:'./home/home.module#HomeModule'},
 ];

AppComponent有一个<router-outlet>。 HomeModule具有以下路由（从HomeRoutingModule导入）：

const routes:Routes = [
  {
    path:'',
    component: HomeRootComponent,
    children: [
      {
        path:'',
        component: DashboardComponent
      }
    ]
  }
];

HomeRootComponent有一个<router-outlet>。

当我导航到空路线时，路由器正确地重定向到/home路由并且HomeModule被实例化（我从构造函数登录）。我希望仪表板显示在HomeRootComponent出口内，AppComponent出口内。但是，HomeRootComponent和DashboardComponent都不会被实例化。控制台中没有错误。

这是a live demo

Answer 1

问题是由循环依赖引起的。当我在我的机器上重新创建回购时，我收到了一些警告

src/app/home/home-routing.module.ts -> src/app/home/index.ts -> src/app/home/home-routing.module.ts
src/app/home/home.module.ts -> src/app/home/home-routing.module.ts -> src/app/home/index.ts -> src/app/home/home.module.ts
src/app/home/index.ts -> src/app/home/home-routing.module.ts -> src/app/home/index.ts

基本上，路由模块正在导入正在导入路由模块的桶。

如果您仍想使用枪管进行组件，我会从枪管中取出模块并根据需要直接导入模块。

// app/home/index.ts
export * from './home-root.component';
export * from './dashboard/dashboard.component';

直接导入家庭路由模块

// app/home/home.module.ts
import {HomeRoutingModule} from './home-routing.module';
import {DashboardComponent, HomeRootComponent} from './';

这是工作的stackblitz（https://stackblitz.com/edit/pfx-ng-zkcy7h-4q5vvf?file=app%2Fapp-routing.module.ts）

Angular 4/5路由配置已损坏

1 个答案: