如何将Angular 13中的Intext模块改造为可复用模块？

1. 把Intext模块改造为独立可加载单元 #

确保模块具备完整的独立运行能力，同时保留对外复用的接口：

• 给IntextModule添加bootstrap数组，指定独立运行时的根组件；
• 导出需要被其他模块复用的组件、指令或管道，通过exports数组暴露；
• 避免硬依赖主项目的全局资源，必要时通过@Inject()或输入参数传递依赖。

示例代码：

@NgModule({
  declarations: [IntextMainComponent, IntextListComponent],
  imports: [CommonModule, RouterModule.forChild(intextRoutes)],
  exports: [IntextMainComponent, IntextListComponent], // 对外暴露可复用组件
  bootstrap: [IntextMainComponent] // 独立运行时的启动组件
})
export class IntextModule {}

2. 配置多入口编译与运行 #

修改angular.json，给项目添加针对Intext模块的独立编译配置：

• 在architect.build.configurations下新增intext配置，指定独立入口文件、输出目录和专属入口HTML；
• 同步配置architect.serve的对应项，支持单独启动Intext模块。

示例配置片段：

"projects": {
  "your-main-app": {
    ...
    "architect": {
      "build": {
        ...
        "configurations": {
          ...
          "intext": {
            "entryFile": "src/app/intext/intext.module.ts",
            "outputPath": "dist/intext-module",
            "index": "src/app/intext/intext-index.html"
          }
        }
      },
      "serve": {
        ...
        "configurations": {
          ...
          "intext": {
            "browserTarget": "your-main-app:build:intext"
          }
        }
      }
    }
  }
}

之后可通过以下命令单独运行/打包模块：

• 单独启动：ng serve --configuration intext
• 单独打包：ng build --configuration intext

3. 在主项目中按需集成复用 #

主项目可通过两种方式引入Intext模块：

• 直接引入：在主模块或其他功能模块的imports数组中添加IntextModule，直接复用其组件；
• 懒加载：通过路由配置实现按需加载，减少主包体积。

直接引入示例：

@NgModule({
  imports: [
    CommonModule,
    IntextModule,
    ...
  ],
  ...
})
export class MainDashboardModule {}

懒加载路由示例：

const routes: Routes = [
  ...
  {
    path: 'intext-features',
    loadChildren: () => import('./intext/intext.module').then(m => m.IntextModule)
  }
];

4. 抽离共享依赖（可选） #

如果Intext模块和主项目存在重复依赖的组件、服务，可将这些内容抽离到单独的SharedModule中，两个模块统一引入该共享模块，避免代码冗余。

示例共享模块：

@NgModule({
  declarations: [SharedIconComponent, SharedAlertService],
  imports: [CommonModule],
  exports: [SharedIconComponent],
  providers: [SharedAlertService]
})
export class SharedModule {}

5. 验证两种运行模式 #

分别测试独立运行和集成运行场景：

• 独立运行：启动ng serve --configuration intext，验证模块功能完整；
• 集成运行：启动主项目，验证Intext模块与其他模块无冲突，组件、服务复用正常。

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