Angular 5多项目管理咨询：如何创建共享公共资源的独立项目

嘿，这个需求我之前帮不少Angular开发者搞定过，在Angular 5里实现两个独立项目共享组件、服务、工具类和npm包，主要有两种靠谱的方案，我给你一步步拆解清楚：

这种方式能让共享代码完全独立，同时两个项目可以像引入第三方npm包一样使用它，非常符合模块化的设计思路。

1. 搭建共享库的基础结构 #

在你的dev目录下新建一个shared-lib文件夹，作为所有共享代码的仓库，按照Angular模块的规范来组织内容：

• src/app/components：存放可复用组件（比如通用按钮、用户卡片这类）
• src/app/services：存放共享服务（比如API请求服务、权限验证服务）
• src/app/utils：存放工具类（比如日期格式化、字符串处理的工具函数）
• 别忘了创建一个根模块shared.module.ts，把所有共享组件、服务都声明并导出，这样其他项目只要导入这个模块就能用所有共享内容了
• 给shared-lib配置package.json，指定入口文件（比如main: './dist/shared-lib.js'），并且确保里面依赖的Angular核心包版本和project1、project2完全一致

2. 编译共享库 #

Angular 5的TypeScript代码需要编译成浏览器能识别的JS才能被其他项目引用，你可以这么做：

• 把shared-lib当成一个小型Angular项目，用ng new shared-lib初始化（记得选和现有项目一致的Angular版本）
• 运行ng build --prod编译共享库，产物会生成在dist目录里，确保package.json的main字段指向这个编译后的文件

3. 让两个项目关联共享库 #

有两种方式可以让project1和project2引入共享库：

• npm link 方式：在shared-lib目录下运行npm link，然后分别去project1和project2的目录里执行npm link shared-lib，这样两个项目就能像导入@angular/core一样导入共享模块了
• 本地依赖方式：在project1和project2的package.json里添加"shared-lib": "file:../shared-lib"，然后运行npm install，这种方式更直观，但每次共享库更新后需要重新执行npm install来同步

4. 共享npm包的小技巧 #

• 确保project1、project2和shared-lib的package.json里，核心依赖（比如@angular/core、rxjs、zone.js）的版本完全一致，这样npm会自动复用缓存，避免重复安装占用磁盘空间
• 如果某些工具包（比如lodash、moment）是两个项目都要用的，可以统一指定相同版本，也可以考虑在dev目录下全局安装，但更稳妥的还是让每个项目的依赖版本对齐

如果你们团队需要频繁维护多个关联项目，把所有内容放到一个monorepo里会更高效：

• 在dev目录下新建angular-monorepo文件夹，内部结构如下：
  • projects/project1：迁移原有的project1项目
  • projects/project2：新建的project2项目
  • projects/shared-lib：共享代码库
• 手动修改根目录的.angular-cli.json（Angular 5用这个配置文件），添加多个项目的配置项，指定每个项目的根目录、构建输出路径等
• 这种方式下，共享库可以直接作为本地模块被两个项目导入，不需要npm link，而且可以通过根目录的命令统一编译所有项目

• 保持共享代码的独立性：共享组件/服务不要依赖某个项目的特定逻辑（比如不要直接引用project1的环境变量），要通过输入属性、注入参数的方式传递动态内容，避免耦合
• 版本控制：如果用独立共享库，建议单独建一个git仓库管理；如果用monorepo，直接把所有内容放到同一个仓库即可，注意及时提交共享代码的更新
• 编译同步：每次修改共享库后，一定要重新编译，再同步到两个项目里，避免出现代码不一致的问题

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