如何通过集中式Angular库复用@angular/common等依赖，无需本地直接引入？

可行性结论 #

完全可行，通过正确配置依赖声明与项目解析规则，就能让Angular应用从你的集中式库中获取@angular/core、@angular/common等核心依赖，无需在应用本地重复安装。

具体实现步骤 #

1. 配置集中式库的package.json

   • 将@angular/core、@angular/common等核心依赖添加为库的dependencies（而非peerDependencies），确保库安装时会拉取这些依赖到自身的node_modules目录。
   • 明确指定这些依赖的固定版本，避免版本漂移导致的兼容性问题。

2. 配置应用的依赖引用

   • 在应用的package.json中，仅添加你的集中式库作为依赖，不要直接声明@angular/core等核心依赖。
   • 执行npm install拉取依赖，让npm自动处理集中式库及其嵌套依赖。

3. 配置TypeScript路径映射

   • 修改应用根目录下的tsconfig.json，添加paths配置，引导TypeScript从集中式库的依赖目录解析Angular核心模块：

     {
       "compilerOptions": {
         "paths": {
           "@angular/core": ["./node_modules/your-central-lib/node_modules/@angular/core"],
           "@angular/common": ["./node_modules/your-central-lib/node_modules/@angular/common"],
           "@angular/router": ["./node_modules/your-central-lib/node_modules/@angular/router"],
           // 其他需要共享的Angular包按需添加
         }
       }
     }
     

4. 配置Angular CLI的符号链接支持

   • 修改angular.json中对应应用的构建配置，开启preserveSymlinks，避免路径解析错误：

     {
       "projects": {
         "your-app": {
           "architect": {
             "build": {
               "options": {
                 "preserveSymlinks": true
               }
             },
             "serve": {
               "options": {
                 "preserveSymlinks": true
               }
             }
           }
         }
       }
     }
     

关键建议 #

• 优先使用Monorepo工具：Nx、Lerna这类工具能自动处理多应用/库的依赖共享与版本一致性，无需手动配置路径映射，大幅降低维护成本。
• 严格管控版本：集中式库中的Angular依赖版本必须统一，所有应用依赖同一个版本的集中式库，避免出现多版本Angular共存的情况。
• 验证依赖解析：执行ng serve和ng build测试应用，若出现模块找不到的错误，检查路径映射的正确性，或确认集中式库的node_modules中已正确安装Angular依赖。
• 注意兼容性：确保集中式库的Angular版本与应用代码兼容，比如Angular 15的库不能用于Angular 14的应用，避免运行时API冲突。

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