Question

我无法显示第三个嵌套组件。

预期：

Hello App组件

Hello Nest-A组件

Hello Nest-1组件

Hello Test-Z组件

实际：

Hello App组件

Hello Nest-A组件

Hello Nest-1组件

为什么我的Test-Z组件不显示？

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { NestAModule } from './nest-a/nest-a.module';

const rootRoutes: Routes = [
  { path: '', redirectTo: 'nest-a', pathMatch: 'full' },
  { path: 'nest-a', redirectTo: 'nest-a', pathMatch: 'full' },
];

@NgModule({
  imports: [ 
    BrowserModule, 
    FormsModule,
    RouterModule.forRoot(rootRoutes),
    NestAModule,
  ],
  declarations: [ 
    AppComponent, 
  ],
  bootstrap: [ 
    AppComponent 
  ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>Hello App Component</h1><router-outlet></router-outlet>',
})
export class AppComponent {
}

嵌套/嵌套路由模块.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NestAComponent } from './nest-a.component';
import { Nest1Component } from './nest-1/nest-1.component';

export const nestARoutes = [
  {
    title: 'Nest A',
    path: 'nest-a',
    component: NestAComponent,
    children: [
      { path: '', redirectTo: 'nest-1', pathMatch: 'full' },
      { path: 'nest-1', component: Nest1Component },
    ],
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(nestARoutes),
  ],
  exports: [
    RouterModule
  ]
})
export class NestARoutingModule { }

nest-a / nest-a.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-nest-a',
    template: `<h1>Hello Nest-A Component</h1><router-outlet></router-outlet>`
})
export class NestAComponent {
}

nest-a / nest-a.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NestAComponent } from './nest-a.component';
import { NestARoutingModule, nestARoutes } from './nest-a-routing.module';
import { Nest1Module } from './nest-1/nest-1.module';


@NgModule({
  declarations: [
    NestAComponent,
  ],
  imports: [
    NestARoutingModule,
    Nest1Module,
    RouterModule.forChild(nestARoutes),
  ],
})
export class NestAModule { }

nest-a / nest-1 / nest-1-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Nest1Component } from './nest-1.component';
import { TestYComponent } from './test-y/test-y.component'
import { TestZComponent } from './test-z/test-z.component'

export const nest1Routes = [
  {
    title: 'Nest 1',
    path: 'nest-1',
    component: Nest1Component,
    children: [
      { path: '', redirectTo: 'test-z', pathMatch: 'full'},
      { path: 'test-y', component: TestYComponent},
      { path: 'test-z', component: TestZComponent},
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(nest1Routes),
  ],
  exports: [
    RouterModule
  ]
})
export class Nest1RoutingModule { }

nest-a / nest-1 / nest-1.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-nest-1',
    template: `<h1>Hello Nest-1 Component</h1><router-outlet></router-outlet>`
})

export class Nest1Component {
}

nest-a / nest-1 / nest-1.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Nest1Component } from './nest-1.component';
import { Nest1RoutingModule, nest1Routes } from './nest-1-routing.module';
import { TestZModule } from './test-z/test-z.module'

@NgModule({
  declarations: [
    Nest1Component,
  ],
  imports: [
    Nest1RoutingModule,
    TestZModule,
    RouterModule.forChild(nest1Routes),
  ],
})
export class Nest1Module { }

nest-a / nest-1 / nest- / nest- .component.ts

（有一个Y和Z，没有重要区别）

import { Component } from '@angular/core';

@Component({
    selector: 'my-test-*',
    template: `<h1>Hello Test-* Component</h1>`
})

export class Test*Component {
}

Answer 1

代码中有几处错误，会给路由器解析带来麻烦：

您的路径分为不同的模块，但是在路由定义中，您要告诉路由器直接加载组件而不是整个子模块（其中包含子模块路由定义）
在子模块中，您需要第一个路径为空以加载模块主组件（在nest-1模块中，您的空路径将加载nest-1组件。不是父模块要执行的工作）加载子模块 entry 组件）
您的路由在路由器模块和主模块中都已设置（例如，在nest-a.module和nest-a.routing.module中，您都有此行RouterModule.forChild(nestARoutes),）。必须仅在一个位置（路由模块，然后将其导入主模块）中定义它们。
路由器负责加载子模块（使用路径定义中的loadChildren属性），因此您无需在父模块（es：nest-a）中导入子模块。模块不需要导入nest-1.module

在下面，您发现您的示例已按上述说明进行了修改。主要的两件事是：

在父模块路由定义中，您需要使用loadChildren属性来加载子模块（及其路由定义）
在子模块中，您的第一个路径为空，然后加载子模块 entry 组件（例如：nest-1模块将加载nest-1组件）

WORKING EXAMPLE

希望我很清楚。

Answer 2

更新代码Luca Regazzi的答案后，我开始在生产中收到以下错误消息。

错误：未捕获（承诺）：错误：运行时编译器未加载

错误：运行时编译器未加载

看来，借助AOT，甚至还有另一种方法来加载记录在文档In this Bug Report on Angular/Angular-cli中的Children。

代替：

import { MyComponent } from './path/mycomponent.component';

...

loadChildren: () => MyComponent

应该是：

// no import

...

loadChildren: () => import('./path/mycomponent.component')
  .then(m => m.MyComponent)

深层嵌套组件不显示

2 个答案: