如何在不同场景复用Angular应用？共享代码库与多主组件方案咨询

针对你的场景，现有两种核心方案解决代码复用和多组件引导的问题：

一、官方推荐：Angular工作区+共享库 #

这是最规范的多项目代码共享方式，能彻底解决重复代码问题：

1. 初始化空工作区：创建不含默认应用的工作区，统一管理两个项目和共享代码

   ng new angular-embedded-workspace --create-application=false
   

2. 创建两个业务应用：分别对应合作伙伴端的输入应用和客户端的输出应用

   ng generate application input-app
   ng generate application output-app
   

3. 构建共享库：把两个应用共用的组件、服务、工具类、模型全部放到共享库中

   ng generate library shared-core
   

   共享库会自动注册到工作区，你可以在其中编写共用代码，比如共用的表单组件、API服务等。
4. 在业务应用中引入共享库：在input-app或output-app的模块中导入共享库的模块，即可使用其中的代码

   import { SharedCoreModule } from '@angular-embedded-workspace/shared-core';
   
   @NgModule({
     imports: [BrowserModule, SharedCoreModule],
     // ...其他配置
   })
   export class InputAppModule { }
   

5. 分别构建应用：针对两个应用单独构建，生成各自的bundle文件嵌入到老网站

   ng build input-app --prod
   ng build output-app --prod
   

   构建产物会放在dist/input-app和dist/output-app目录，对应各自的runtime.js、polyfills.js、main.js。

二、单项目多入口：引导不同主组件 #

如果不想拆分多个应用，也可以在单个Angular项目中配置多入口，通过不同构建命令引导不同的主组件：

1. 修改angular.json配置：在项目的build配置中添加两个自定义环境，指定不同的主文件和输出路径

   "projects": {
     "your-app": {
       "architect": {
         "build": {
           "configurations": {
             "input": {
               "main": "src/main.input.ts",
               "outputPath": "dist/input",
               "tsConfig": "src/tsconfig.input.json"
             },
             "output": {
               "main": "src/main.output.ts",
               "outputPath": "dist/output",
               "tsConfig": "src/tsconfig.output.json"
             }
           }
         }
       }
     }
   }
   

2. 创建两个主入口文件：分别引导<jhi-input-main>和<jhi-output-main>组件
   比如src/main.input.ts：

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { InputAppModule } from './app/input-app.module';
   
   platformBrowserDynamic().bootstrapModule(InputAppModule)
     .catch(err => console.error(err));
   

   src/app/input-app.module.ts中指定引导组件：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { InputMainComponent } from './input-main/input-main.component';
   
   @NgModule({
     declarations: [InputMainComponent],
     imports: [BrowserModule],
     bootstrap: [InputMainComponent] // 引导<jhi-input-main>组件
   })
   export class InputAppModule { }
   

   同理创建main.output.ts和OutputAppModule，引导<jhi-output-main>组件。
3. 按配置构建：执行不同命令生成对应bundle

   ng build --configuration=input --prod
   ng build --configuration=output --prod
   

三、代码复用的细节优化 #

• 共享库可按功能拆分：比如拆成shared-ui（共用UI组件）、shared-services（共用API服务）、shared-models（数据模型），按需导入减少打包体积
• 开启Tree Shaking：构建时加上--prod参数，Angular会自动剔除未使用的代码
• 共用资源管理：把共用的样式、图片等放到工作区的assets目录，或在共享库的ng-package.json中配置资源路径，让业务应用能直接访问

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