Angular 11配置两库懒加载路由后ng build仅library2生成独立懒加载chunk

核心分包逻辑说明 #

Angular CLI 的内置构建分包策略不会为每个动态import生成独立chunk，当满足任意触发条件时，目标库的代码会被合并到已有chunk中，不会生成独立的懒加载文件：

• 动态import的路径映射解析失效，被编译器识别为静态引入
• 目标库的代码被项目内其他模块提前静态引用，被分包系统自动抽取合并到公共chunk
• 目标库本身没有为懒加载的路由模块配置独立入口，和其他模块共享同一个打包产物

注：你之前调整library2对library1的引用但构建结果无变化，大概率是路径映射解析失效的问题优先触发了静态打包，调整引用关系不会改变最终的分包结果。

具体排查步骤 #

1. 验证动态import的路径解析正确性
   检查主应用tsconfig.json中的paths配置，确保library1的路径映射指向其发布的fesm格式编译产物，而非源码目录、类型声明文件。如果路径指向错误，Angular编译器会直接将动态import转换为静态依赖，相关代码会被合并到main.js或vendor.js初始chunk中，不会单独生成懒加载文件。
2. 排查跨模块的静态引用
   全项目搜索所有import ... from 'library1'的静态引入语句，确认是否存在以下场景：
   • 主应用的任意组件、服务、模块没有经过动态加载就直接引入了library1的导出
   • library2的代码中静态引入了library1的任意导出
     存在上述场景时，library1的代码会被自动拆分到对应引用方的chunk中：如果被library2静态引用，library1的代码会直接合并到已生成的library2.js懒加载文件内，不会单独生成独立chunk。可直接打开构建后的library2.js文件搜索library1路由模块的相关代码字符串，即可验证是否存在合并情况。
3. 检查Angular库的入口配置
   查看library1的ng-package.json配置，确认需要懒加载的AccountRoutingModule是否被打包到了库的主入口文件中。如果该路由模块和其他被静态引用的代码共享同一个fesm入口，构建系统不会将同入口的代码拆分成独立的懒加载chunk。

对应解决方法 #

• 给library1的AccountRoutingModule配置独立的子入口，路由配置中的动态import直接指向该子入口路径，确保该入口没有被其他模块静态引用。
• 移除项目内所有对library1非必要的静态引入，确保只有路由配置中的动态import会访问对应路由模块的代码。
• 使用包内容分析工具查看最终chunk的代码构成，确认library1的代码最终被合并的位置。

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