Nx 和 Angular：安装的本地库版本与浏览器版本不同答案

【问题标题】：Nx and Angular: version of installed local library differs from browser oneNx 和 Angular：安装的本地库版本与浏览器版本不同
【发布时间】：2022-01-21 11:48:45
【问题描述】：

背景：

我创建了两个存储库：存储库 A（包含 Angular 应用程序）和存储库 B（包含 Angular 库）。这两个存储库都是在本地计算机上克隆和开发的。来自存储库 B 的库通过 npm link 安装在存储库 A 中。来自存储库 A 的应用程序使用来自存储库 B 的库（例如 Angular 服务）。

这两个存储库都是使用 Nx 版本 13.3.9 创建的。为了更好地理解，我简化了这个描述的复杂性。实际上，这两个项目都是具有更多应用程序和库的大型单一存储库。

问题

我为存储库 A 的 App 提供服务并使用 Chrome 打开它。每当我对存储库 B 的库进行更改时，我都会构建该库，并且存储库 A 中的 ng-development-server 会识别更改并重新编译应用程序。我已经检查了对存储库 B 中的库所做的更改是否与存储库 A 的 node_modules 文件夹中安装的库相同。这意味着存储库 A 中安装的库和存储库 B 的构建是正确的同步。但是，当我使用 Chrome 打开应用程序并使用 webdev-tools 对其进行调试时，我会看到旧版本的库没有新的更改。

建议

我认为这是某种缓存问题，但我不知道如何解决。我不知道为什么会发生这种情况，我也不知道这个问题的根源。

我现在尝试了什么

我已经彻底清除了 Chrome 浏览器的缓存并重启了很多次
我尝试了其他网络浏览器，例如 Firefox
我尝试将 Nx 升级到最新版本
我删除了 node_modules 文件夹并重新安装了所有依赖项
我从 node_modules/.cache 中删除了缓存

尝试重现此问题

我尝试使用 Nx 13.3.9 通过两个测试存储库重现此问题，但没有成功。新的存储库不知何故没有这个问题。我想分享这个问题的一个最小示例，但我不能。

问题

我该如何解决这个问题？为什么会这样？我知道没有任何代码很难提供帮助，但是两个“真正的”存储库很大，而且安装并不容易。很遗憾，我无法分享代码。

【问题讨论】：

每次更改后手动重启ng-development-server是否有效？
您的意思是再次致电ng serve 吗？不，它不起作用。
我目前的假设是问题与preserveSymlinksoption 有关。我正在做更多的研究
我个人从未有过使用符号链接和 Angular 的良好体验。但是你是怎么把它们联系起来的？您是手动运行 npm link 还是在 package.json 的依赖项中使用它，如下所示："dependencies": { "bar": "file:../foo/bar/dist/built-project" } 并运行 npm install 应该为您完成所有工作。
@EricAska 我手动使用了npm link。据我所知，通过“file:../...”安装包也会以npm linkdoes 的方式创建符号链接。我测试了它，它是同样的问题。

标签： angular webpack webpack-dev-server angular-library nrwl-nx

【解决方案1】：

我在 cmets 部分的假设是正确的：问题是由我的 angular.json 文件中的 preserveSymlinks 选项引起的。我不知道为什么，但是这个选项导致 webpack 在某些内容发生更改后无法正确更新符号链接。

将preserveSymlinks 选项从 true 更改为 false 后，出现错误：

inject() must be called from an injection context

解决此错误的一个解决方案是再次添加preserveSymlinks选项。但是我不想再次添加它并应用了另一个解决方案：我在tsconfig.base.json中的paths属性中添加了以下代码：

"paths": {
     "@angular/*": [
         "./node_modules/@angular/*"
     ],
...

【讨论】：