Nx and Angular: 安装的本地库版本与浏览器版本不同
Nx and Angular: version of installed local library differs from browser one
背景:
我创建了两个存储库:存储库 A(包含一个 Angular 应用程序)和存储库 B(包含一个 Angular 库)。这两个存储库都是在本地计算机上克隆和开发的。来自存储库 B 的库通过 npm link
安装在存储库 A 中。存储库 A 中的应用程序使用存储库 B 中的库(例如 Angular 服务)。
两个存储库都是使用 Nx 版本 13.3.9 创建的。为了更好地理解,我简化了这个描述的复杂性。实际上,这两个项目都是包含更多应用程序和库的大型单一存储库。
问题
我服务于存储库 A 的应用程序并使用 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 在两个测试存储库中重现此问题,但没有成功。新的存储库不知何故没有这个问题。我想分享这个问题的一个最小例子,但我不能。
问题
我该如何解决这个问题,为什么会发生这种情况?我知道没有任何代码很难提供帮助,但是两个“真正的”存储库很大而且安装并不容易。不幸的是我不能分享代码。
我在评论部分的假设是正确的:问题是由我的 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/*"
],
...
背景:
我创建了两个存储库:存储库 A(包含一个 Angular 应用程序)和存储库 B(包含一个 Angular 库)。这两个存储库都是在本地计算机上克隆和开发的。来自存储库 B 的库通过 npm link
安装在存储库 A 中。存储库 A 中的应用程序使用存储库 B 中的库(例如 Angular 服务)。
两个存储库都是使用 Nx 版本 13.3.9 创建的。为了更好地理解,我简化了这个描述的复杂性。实际上,这两个项目都是包含更多应用程序和库的大型单一存储库。
问题
我服务于存储库 A 的应用程序并使用 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 在两个测试存储库中重现此问题,但没有成功。新的存储库不知何故没有这个问题。我想分享这个问题的一个最小例子,但我不能。
问题
我该如何解决这个问题,为什么会发生这种情况?我知道没有任何代码很难提供帮助,但是两个“真正的”存储库很大而且安装并不容易。不幸的是我不能分享代码。
我在评论部分的假设是正确的:问题是由我的 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/*"
],
...