Webpack打包Angular应用时意外包含本地库node_modules问题排查

这个问题我之前帮同事处理过类似场景，核心是Angular库的打包配置和file:安装方式下的依赖解析逻辑导致的，下面给你详细拆解：

为什么会出现bundle包含库的node_modules？ #

当你通过file:路径安装本地库时，Angular CLI在打包应用时，会默认把本地库目录下的所有文件（包括意外存在的node_modules）都纳入bundle——因为它会认为这是库发布产物的一部分。而正确的Angular库打包产物应该只包含自身代码，peerDependencies（比如@angular/core）应该由宿主应用提供，完全不应该出现在库的dist目录里。

你的库虽然在package.json里声明了peerDependencies，但如果打包时没正确配置排除这些依赖，它们就会被误打包进dist目录，最终被应用bundle包含。

具体解决步骤 #

1. 修复Angular库的打包配置（关键） #

Angular库默认用ng-packagr打包，你需要确保它的配置正确排除peerDependencies：

• 打开库根目录下的ng-package.json，确认配置如下（重点是whitelistedNonPeerDependencies）：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/someLib",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "whitelistedNonPeerDependencies": []
}

whitelistedNonPeerDependencies设为空数组，意味着所有非peerDependencies都会被排除（你的库只有peerDependencies，正好符合需求）。

• 重新打包库，确保产物干净：

ng build someLib --prod

打包完成后，去C:/libraries/dist/someLib目录检查，确保没有node_modules文件夹，只有库的编译产物和package.json。

2. 优化本地库的安装方式（可选但推荐） #

file:安装虽然直观，但偶尔会有依赖解析的小问题，改用npm链接方式更可靠：

• 进入库的dist/someLib目录，执行：

npm link

• 切换到应用目录C:/app，执行：

npm link someLib

这种符号链接的方式下，npm能更准确地识别库的peerDependencies，避免误打包无关文件。

3. 验证应用的打包配置 #

最后检查应用的angular.json，确保没有意外引用库的node_modules：

• 查看projects.app.architect.build.options下的assets和scripts配置，确认没有指向库的node_modules目录的条目。

验证结果 #

完成上述步骤后，执行应用的生产打包命令：

ng build --prod

检查dist/app下的bundle文件，就能确认库的node_modules已经不会被包含进去了。

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