NPM工作区中Angular应用如何自动识别依赖库的node_modules路径加载资源？

兄弟我太懂这种痛点了！在NPM工作区里维护多个Angular应用，升级依赖还要手动改路径，简直是给自己挖坑，一不小心就搞混版本。别担心，有个超简单的方法能让Angular自动帮你找对依赖资源的路径，再也不用手动切换../node_modules和./node_modules了！

核心解决方法：用包名直接引用资源，抛弃硬编码的相对路径前缀 #

Angular CLI本身是遵循Node.js的模块解析规则的——它会自动从当前项目的node_modules开始查找依赖，如果找不到，就会向上遍历父目录的node_modules。所以你完全不用硬编码../或者./node_modules这些前缀，直接写依赖包内部的资源路径就行！

举个具体的配置修改例子：
原来你在angular.json里是这么写的：

"styles": [
  "../node_modules/some_library/Build/SomeLibrary.css"
],
"scripts": [
  "../node_modules/some_library/Build/SomeLibrary.js"
]

现在直接改成这样：

"styles": [
  "some_library/Build/SomeLibrary.css"
],
"scripts": [
  "some_library/Build/SomeLibrary.js"
]

实际效果说明 #

• 当app1自己的node_modules里有新版的some_library时，Angular会自动加载app1/node_modules/some_library里的资源；
• 当app2还在用根目录node_modules里的旧版本时，它会自动找到根目录的依赖资源；
• 等你以后把app2也升级到新版，Angular同样会自动切换到对应的node_modules路径，完全不用你手动改配置！

小小贴士 #

如果改完配置后发现还是加载了旧版本的资源，大概率是构建缓存搞的鬼。运行ng clean清空构建缓存，再重新执行ng build就能解决。

这个方法本质上是利用了Node.js本身的模块查找机制，Angular CLI在处理styles和scripts的时候会复用这套逻辑，所以不管你的依赖是安装在项目级还是根级的node_modules，它都能精准定位到正确的文件。

这样一来，你就彻底摆脱了手动切换路径的麻烦，再也不用担心升级依赖时改错路径导致的版本问题啦！

内容来源于stack exchange