Angular5+多应用模块懒加载方案及路由实现咨询

嘿，你的这个方案完全可行！基于Angular CLI初始化的项目，用独立模块+懒加载来拆分10+个小型应用，刚好契合Angular的模块化设计理念，也能完美适配CMS站点的部署需求。下面我给你一步步拆解路由设计的具体实现方式：

首先在根路由模块（app-routing.module.ts）里，为每个子应用配置懒加载路由规则。每个子应用对应一个独立的URL路径，通过loadChildren指定模块的路径，Angular会在用户访问对应URL时才加载该模块的代码，实现懒加载。

示例代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  // 子应用1：访问 /app1 时加载App1Module
  {
    path: 'app1',
    loadChildren: './app1/app1.module#App1Module' // Angular5+的懒加载写法
  },
  // 子应用2：访问 /app2 时加载App2Module
  {
    path: 'app2',
    loadChildren: './app2/app2.module#App2Module'
  },
  // 更多子应用以此类推...
  // 默认路由：可以跳转到某个子应用，或者显示CMS的默认内容
  {
    path: '',
    redirectTo: '/app1',
    pathMatch: 'full'
  },
  // 404路由：处理无效URL
  {
    path: '**',
    redirectTo: '/app1'
  }
];

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

每个子应用需要创建独立的模块和对应的路由模块，比如App1Module和App1RoutingModule。在子路由模块里，配置该应用内部的路由规则，包括默认路由、子页面路由等。

示例（以App1为例）：
首先创建app1目录，包含app1.module.ts和app1-routing.module.ts：

app1-routing.module.ts代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { App1HomeComponent } from './app1-home/app1-home.component';
import { App1DetailComponent } from './app1-detail/app1-detail.component';

const routes: Routes = [
  // 子应用1的默认路由：访问 /app1 时显示App1HomeComponent
  {
    path: '',
    component: App1HomeComponent
  },
  // 子应用1的子页面：访问 /app1/detail 时显示App1DetailComponent
  {
    path: 'detail',
    component: App1DetailComponent
  }
];

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

app1.module.ts代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { App1RoutingModule } from './app1-routing.module';
import { App1HomeComponent } from './app1-home/app1-home.component';
import { App1DetailComponent } from './app1-detail/app1-detail.component';

@NgModule({
  declarations: [
    App1HomeComponent,
    App1DetailComponent
  ],
  imports: [
    CommonModule,
    App1RoutingModule // 导入子应用自己的路由模块
  ]
})
export class App1Module { }

其实你不需要额外写“根据URL指定引导模块”的代码——Angular的路由系统已经帮你处理了：

• 当用户访问your-cms-domain.com/app1时，根路由会匹配到path: 'app1'的规则，自动加载App1Module并初始化它；
• 每个子模块的路由会接管当前路径下的子路由（比如/app1/detail），完全独立于其他子应用；
• 所有子应用共享根模块的依赖（比如HttpClient、全局样式等），但各自的组件、服务都是隔离的，避免冲突。

因为要部署在CMS站点中，需要处理几个关键问题：

• Base Href配置：如果你的Angular项目部署在CMS的子路径下（比如your-cms-domain.com/embedded-apps/），编译时要指定base-href：

  ng build --base-href=/embedded-apps/
  

  或者手动修改index.html里的<base href="/embedded-apps/">，确保Angular路由能正确解析URL。
• CMS路由兼容：需要配置CMS，让它不要拦截Angular的路由路径（比如/embedded-apps/app1、/embedded-apps/app2），而是将这些路径的请求转发到Angular的index.html，由Angular路由处理。具体配置方式取决于你使用的CMS，核心是实现“HTML5模式路由的 fallback”。

• 共享模块抽离：把所有子应用都用到的公共组件、指令、服务（比如按钮组件、HTTP拦截器）抽成SharedModule，每个子应用模块按需导入，避免重复代码。
• 自定义预加载策略：如果希望某些常用的子应用在后台提前加载（提升后续访问速度），可以自定义预加载策略，替代默认的PreloadAllModules。比如只预加载用户访问过的模块，或者根据CMS的用户行为数据预加载热门应用。
• 模块隔离增强：如果需要更强的隔离性，可以为每个子应用配置独立的NgZone，避免不同应用的变更检测互相影响。

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