Angular 8路由模块加载咨询：如何在含自有路由的指定路由加载自定义模块

嘿，我来帮你搞定Angular 8里路由加载模块的事儿，包括你想把自己创建的模块挂载到指定路由上的操作，一步步来哈～

Angular 8推荐用懒加载来加载特性模块，既能优化初始加载速度，也能清晰划分路由与模块的对应关系。下面是具体步骤：

1. 准备带路由的自定义模块（如果已有可跳过） #

如果你还没创建自定义模块，可以用Angular CLI快速生成带路由配置的模块：

ng generate module my-feature --routing

这个命令会生成两个关键文件：my-feature.module.ts（模块文件）和my-feature-routing.module.ts（该模块的路由配置文件）。

2. 配置自定义模块的内部路由 #

打开my-feature-routing.module.ts，定义该模块下的路由规则，注意要用RouterModule.forChild()（主路由才用forRoot()）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// 导入模块内的组件
import { MyFeatureHomeComponent } from './my-feature-home/my-feature-home.component';
import { MyFeatureDetailComponent } from './my-feature-detail/my-feature-detail.component';

const routes: Routes = [
  { path: '', component: MyFeatureHomeComponent }, // 模块的默认路由（访问/my-feature时加载）
  { path: 'detail/:id', component: MyFeatureDetailComponent } // 模块的子路由（访问/my-feature/detail/1时加载）
];

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

别忘了把这个路由模块导入到自定义模块本身（my-feature.module.ts），否则路由不会生效：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyFeatureRoutingModule } from './my-feature-routing.module';
import { MyFeatureHomeComponent } from './my-feature-home/my-feature-home.component';
import { MyFeatureDetailComponent } from './my-feature-detail/my-feature-detail.component';

@NgModule({
  declarations: [MyFeatureHomeComponent, MyFeatureDetailComponent],
  imports: [
    CommonModule,
    MyFeatureRoutingModule // 必须导入路由模块
  ]
})
export class MyFeatureModule { }

3. 在主路由中挂载自定义模块 #

打开主路由文件app-routing.module.ts，用loadChildren配置懒加载规则，把自定义模块绑定到你想要的路由路径上：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  // 重点：把自定义模块挂载到'/my-feature'路由上
  { 
    path: 'my-feature', 
    // Angular 8的动态import语法，会在用户访问该路由时才加载模块
    loadChildren: () => import('./my-feature/my-feature.module').then(m => m.MyFeatureModule) 
  }
];

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

这样，当用户访问/my-feature或它的子路由时，Angular会自动加载你的自定义模块并渲染对应的组件。

如果想让懒加载模块在初始加载完成后后台预加载（提升后续访问速度），可以在主路由里配置预加载策略：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  // 路由配置同上
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules // 预加载所有懒加载模块
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

内容的提问来源于stack exchange，提问作者Afaaq Suhail