Angular符号链接模块未加入编译JS输出的问题解决咨询

可行解决方法 #

• 修正库的package.json配置
  确保自建库的package.json里main、module、typings字段准确指向编译后的输出文件（通常是dist目录下的index.js、index.mjs、index.d.ts）。如果库包含全局样式或有副作用的代码，添加sideEffects: true或者指定具体文件路径，避免webpack的tree-shaking误删必要代码。

• 调整Angular构建配置
  在angular.json的local构建配置中，除了设置preserveSymlinks: true，还可以在options里添加：

  "allowedCommonJsDependencies": [
    "@org/library"
  ]
  

  同时将开发环境（local配置）下的buildOptimizer设为false——buildOptimizer的tree-shaking逻辑对符号链接的依赖处理容易出现异常。

• 使用Angular CLI兼容的npm link方式
  放弃手动创建符号链接，先在库项目根目录执行npm link，再到测试应用根目录执行npm link @org/library。这种方式Angular CLI能更好识别依赖关系，自动处理打包逻辑。

为什么入口配置了却没自动引入？ #

• 符号链接是文件系统层面的快捷方式，webpack和Angular CLI的模块解析器默认会把symlink指向的目录当成外部第三方依赖，而非项目内源码，因此不会自动纳入编译范围。
• 开启preserveSymlinks: true后，Angular会保留符号链接的原始路径，不解析到实际文件路径，这会导致Angular的JIT/AOT编译无法正确追踪库中组件的元数据（比如ɵcmp这类内部标识），webpack的tree-shaking也会误判该库代码未被引用，最终未将其打包进输出文件。
• 手动添加include是强制把库的所有文件纳入编译，但库中很多未被测试应用使用的文件也会被包含，因此会出现大量未使用文件的警告。

内容的提问来源于stack exchange，提问作者Get Off My Lawn