如何将现有Angular 10应用转换为可复用的Angular自定义库

问题1：现有Angular应用转自定义库是否可行？ #

完全可行。本质上Angular应用和库的核心逻辑都是基于Angular的组件、服务、指令等封装，只要把应用中可复用的逻辑剥离出来，符合库的封装规范即可实现转换。

问题2：具体操作步骤 #

前置准备 #

• 先确认你现有Angular 10项目的依赖版本，后续生成的库要和应用的Angular核心版本保持一致，避免版本兼容问题
• 先对现有应用做代码梳理，标记出需要封装到库的公共模块、组件、服务、管道、指令，排除掉和当前应用业务强绑定的专属逻辑（比如特定业务页面、仅当前项目用的路由配置、环境变量硬编码等）

操作流程 #

1. 在现有项目中生成库骨架
   在现有Angular 10项目根目录执行命令：
   ng generate library 你的库名 --prefix 你的公共组件前缀
   执行完成后项目根目录会自动生成projects/你的库名目录，就是库的代码存放位置，同时根目录angular.json会自动新增库的构建配置。

2. 迁移可复用代码到库目录

   • 把之前梳理好的公共组件、服务、指令等代码迁移到projects/你的库名/src/lib对应的目录下
   • 在库的公共入口文件public-api.ts中导出所有需要对外暴露的内容，示例：

   export * from './lib/你的组件/你的组件.component';
   export * from './lib/你的服务/你的服务.service';
   export * from './lib/你的模块/你的公共模块.module';
   

   • 调整代码中所有依赖路径：原本应用内的相对路径引用要改成符合库结构的相对路径，删除所有对当前应用专属src/app下业务代码、环境变量的依赖，库需要的可变参数改成入参或者注入令牌的形式对外提供配置入口。

3. 配置库的依赖与构建规则

   • 打开库目录下的ng-package.json，检查dest配置的构建输出目录，确认lib/entryFile指向正确的public-api.ts
   • 如果你的库依赖第三方包，需要在库目录的package.json的peerDependencies中声明依赖的版本范围，避免和引用方项目的依赖冲突
   • 如果你原来的应用有全局样式需要带到库中，可以在ng-package.json的assets配置中加入对应的样式文件路径，或者把组件样式封装到组件自身的styleUrls中。

4. 本地测试验证

   • 执行库构建命令：ng build 你的库名 --prod
   • 构建完成后进入构建输出目录（默认是dist/你的库名），执行npm link生成本地全局链接
   • 你可以在本地新建一个测试Angular项目，执行npm link 你的库名，然后在测试项目的模块中导入库的公共模块，调用组件/服务验证功能是否正常。
   • 也可以直接在你原有的应用中导入构建好的库，替换原来的本地代码引用，验证原有功能是否正常运行，排查迁移问题。

5. 发布与使用（可选）
   验证没问题后，就可以进入构建输出目录执行npm publish发布到npm私有源或者公共源，其他项目直接执行npm install 你的库名即可导入使用。

注意事项 #

• 库中不要包含路由配置，路由属于应用层的内容，不要封装到通用库中
• 库的组件尽量使用OnPush变更检测策略，降低对引用方项目的性能影响
• 所有对外暴露的API尽量保持稳定，后续迭代尽量兼容旧版本，避免引用方升级出现 breaking change

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