如何在多个Angular项目之间共享组件、服务等公共代码资源

以下两种方案都可以避免全量复制代码，且满足Project1逻辑变更同步到Project2的需求：

方案1：Angular Monorepo单工作区（最推荐） #

Angular官方原生支持同一工作区管理多个项目，你可以抽离公共逻辑为工作区共享库，天然支持多项目同步更新。
操作步骤：

• 新建空的Angular工作区：执行ng new <工作区名称> --no-create-application
• 将原有Project1、新建的Project2都放到工作区的projects目录下，调整配置保证两个项目可独立运行
• 在工作区中创建公共共享库：执行ng generate library shared-core
• 把Project1中需要复用的services、models、interceptors、组件逻辑（剥离html和css文件）全部迁移到shared-core库中，统一对外导出
• Project1和Project2都直接导入shared-core暴露的资源即可，Project2可以自行编写组件的css和自定义html内容，不需要改动共享逻辑
• 后续修改shared-core中的service代码，两个项目会自动同步更新，无需手动同步

方案2：本地npm依赖/软链接（适合不想改动现有项目结构的场景） #

如果不想重构现有Project1的目录结构，可以用本地包依赖的方式实现复用：
操作步骤：

• 把Project1中需要复用的逻辑整理到单独的目录中，在该目录下初始化package.json，将其作为一个独立的本地npm包
• 调整Project1的导入路径，适配新的本地包结构，保证Project1可正常运行
• 在Project2目录下执行npm install <Project1中公共包的相对路径>，也可以用npm link命令创建软链接，即可在Project2中直接导入需要的公共资源
• 后续修改Project1的公共包代码，软链接会自动同步到Project2，不需要额外复制操作

适配修改建议 #

• 可复用的组件建议设计为无样式逻辑组件，模板支持ng-content内容投影，Project2可以直接传入自定义的html内容，无需修改组件核心逻辑
• 配色差异可以通过CSS变量实现，共享逻辑中统一引用CSS变量，两个项目各自定义不同的变量值即可实现配色差异化，不需要改动共享代码

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