记一次升级angular版本以及一些对应库造成的冲突错误R3InjectorError(Standalone[_ThingsModelTemplateComponent])[_DelonLocaleService -> _DelonLocaleService -> _DelonLocaleService]:

解决过程：

利用命令：

npm ls @delon/theme
npm ls @angular/core

查找冲突，得到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
npm ls @delon/theme
himp.platform.angular@0.0.0 /Users/hulijie/SynologyDrive/beifen/auseft/前端项目/angular/1015临河电厂/auseft.platform.web
├─┬ @delon/abc@17.3.1
│ └── @delon/theme@17.3.1
├─┬ @delon/chart@17.3.1
│ └── @delon/theme@17.3.1
├─┬ @delon/form@17.3.1
│ └── @delon/theme@17.3.1
└─┬ @delon/theme@18.2.0
  ├─┬ @delon/abc@18.2.0
  │ └── @delon/theme@18.2.0 deduped
  └─┬ @delon/form@18.2.0
    └── @delon/theme@18.2.0 deduped

(base) MacBook-Pro:auseft.platform.web hulijie$ npm ls @angular/core
himp.platform.angular@0.0.0 /Users/hulijie/SynologyDrive/beifen/auseft/前端项目/angular/1015临河电厂/auseft.platform.web
├─┬ @angular/animations@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/common@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/compiler@18.2.8
│ └── @angular/core@18.2.8 deduped
├── @angular/core@18.2.8
├─┬ @angular/forms@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/platform-browser-dynamic@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/platform-browser@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/router@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @delon/abc@17.3.1
│ └─┬ @delon/theme@17.3.1
│   └─┬ ng-zorro-antd@17.4.1
│     ├── @angular/core@18.2.8 deduped invalid: "^17.0.0" from node_modules/@delon/abc/node_modules/ng-zorro-antd
│     └─┬ @ant-design/icons-angular@17.0.0
│       └── @angular/core@18.2.8 deduped invalid: "^17.0.0" from node_modules/@delon/abc/node_modules/ng-zorro-antd, "^17.0.0" from node_modules/@delon/chart/node_modules/ng-zorro-antd, "^17.0.0" from node_modules/@delon/form/node_modules/ng-zorro-antd, "^17.0.1" from node_modules/@delon/abc/node_modules/@ant-design/icons-angular
├─┬ @delon/chart@17.3.1
│ └─┬ @delon/theme@17.3.1
│   └─┬ ng-zorro-antd@17.4.1
│     ├── @angular/core@18.2.8 deduped invalid: "^17.0.0" from node_modules/@delon/abc/node_modules/ng-zorro-antd, "^17.0.0" from node_modules/@delon/chart/node_modules/ng-zorro-antd
│     └─┬ @ant-design/icons-angular@17.0.0
│       └── @angular/core@18.2.8 deduped invalid: "^17.0.0" from node_modules/@delon/abc/node_modules/ng-zorro-antd, "^17.0.0" from node_modules/@delon/chart/node_modules/ng-zorro-antd, "^17.0.0" from node_modules/@delon/form/node_modules/ng-zorro-antd, "^17.0.1" from node_modules/@delon/abc/node_modules/@ant-design/icons-angular, "^17.0.1" from node_modules/@delon/chart/node_modules/@ant-design/icons-angular
├─┬ @delon/form@17.3.1
│ └─┬ @delon/theme@17.3.1
│   └─┬ ng-zorro-antd@17.4.1
│     ├── @angular/core@18.2.8 deduped invalid: "^17.0.0" from node_modules/@delon/abc/node_modules/ng-zorro-antd, "^17.0.0" from node_modules/@delon/chart/node_modules/ng-zorro-antd, "^17.0.0" from node_modules/@delon/form/node_modules/ng-zorro-antd
│     └─┬ @ant-design/icons-angular@17.0.0
│       └── @angular/core@18.2.8 deduped invalid: "^17.0.0" from node_modules/@delon/abc/node_modules/ng-zorro-antd, "^17.0.0" from node_modules/@delon/chart/node_modules/ng-zorro-antd, "^17.0.0" from node_modules/@delon/form/node_modules/ng-zorro-antd, "^17.0.1" from node_modules/@delon/abc/node_modules/@ant-design/icons-angular, "^17.0.1" from node_modules/@delon/chart/node_modules/@ant-design/icons-angular, "^17.0.1" from node_modules/@delon/form/node_modules/@ant-design/icons-angular
├─┬ @ngx-translate/core@15.0.0
│ └── @angular/core@18.2.8 deduped
├─┬ @ngx-translate/http-loader@8.0.0
│ └── @angular/core@18.2.8 deduped
├─┬ ag-grid-angular@31.3.4
│ └── @angular/core@18.2.8 deduped
├─┬ highcharts-angular@4.0.1
│ └── @angular/core@18.2.8 deduped
├─┬ ng-alain@17.3.1
│ └─┬ @angular/cdk@17.3.10
│   └── @angular/core@18.2.8 deduped
├─┬ ng-zorro-antd@18.1.1
│ ├─┬ @angular/cdk@18.2.8
│ │ └── @angular/core@18.2.8 deduped
│ ├── @angular/core@18.2.8 deduped
│ └─┬ @ant-design/icons-angular@18.0.0
│   └── @angular/core@18.2.8 deduped
├─┬ ng2-konva@9.0.0
│ └── @angular/core@18.2.8 deduped
└─┬ ngx-mqtt@17.0.0
  └── @angular/core@18.2.8 deduped

npm error code ELSPROBLEMS
npm error invalid: @angular/core@18.2.8 /Users/hulijie/SynologyDrive/beifen/auseft/前端项目/angular/1015临河电厂/auseft.platform.web/node_modules/@angular/core
npm error A complete log of this run can be found in: /Users/hulijie/.npm/_logs/2024-10-16T09_24_48_132Z-debug-0.log

从npm ls @angular/core的结果得知：是项目中有 17.3.1 和 18.2.0 版本的 @delon/theme，这可能是依赖项不一致造成的

原因：

项目中出现了多个版本的 @delon/theme 包以及与 Angular 版本的冲突问题。具体情况如下：

  • 项目中有 17.3.1 和 18.2.0 版本的 @delon/theme，这可能是依赖项不一致造成的。
  • ng-zorro-antd@17.4.1 要求的 @angular/core 版本是 ^17.0.0，而您的项目中实际使用的是 @angular/core@18.2.8，这导致了 invalid 警告。

这种版本不一致会导致诸如 NullInjectorError 等依赖注入问题，尤其是 DelonLocaleService 无法正确提供。

问题的根本原因：

  • ng-zorro-antd 和 @delon/theme 的版本不一致：ng-zorro-antd@17.4.1 和 @delon/theme@17.3.1 使用的 @angular/core 版本是 17.x，而您的 Angular 是 18.x，因此出现了版本不兼容的问题。
  • **重复依赖 @delon/theme**：您的项目中有两个版本的 @delon/theme（17.3.1 和 18.2.0），需要统一版本。

解决方案：

步骤 1：升级 @delon/theme 及其相关依赖到 18.x

为了与 Angular 18.x 兼容，需要将 @delon/theme、ng-zorro-antd 以及其他相关依赖更新到支持 Angular 18 的版本。

  1. **升级 @delon/theme 和 ng-zorro-antd**：

    使用以下命令将 @delon/theme 和 ng-zorro-antd 更新到与 Angular 18.x 兼容的版本：

     

    npm install @delon/theme@18.2.0 @delon/abc@18.2.0 @delon/chart@18.2.0 @delon/form@18.2.0 ng-zorro-antd@18.1.1

    这将确保所有 @delon 相关包使用一致的 18.x 版本。

  2. 删除重复的依赖： 删除 node_modules 和 package-lock.json，然后重新安装依赖以确保没有冲突的版本：

     

    rm -rf node_modulesrm package-lock.jsonnpm install

步骤 2：解决 invalid 依赖问题

在更新完成后，检查是否还有不兼容的依赖项。特别是需要确保 @delon 系列的所有包都与 Angular 18.x 兼容。

步骤 3：检查依赖一致性

您可以再次运行 npm ls @delon/theme 和 npm ls @angular/core，以确保没有版本冲突。所有 @delon/theme 和 ng-zorro-antd 应该都是 18.x 版本，与 @angular/core 一致。

再次执行命令：

npm ls @delon/theme
npm ls @angular/core

npm ls @angular/core
himp.platform.angular@0.0.0 /Users/hulijie/SynologyDrive/beifen/auseft/前端项目/angular/1015临河电厂/auseft.platform.web
├─┬ @angular/animations@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/common@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/compiler@18.2.8
│ └── @angular/core@18.2.8 deduped
├── @angular/core@18.2.8
├─┬ @angular/forms@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/platform-browser-dynamic@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/platform-browser@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @angular/router@18.2.8
│ └── @angular/core@18.2.8 deduped
├─┬ @ngx-translate/core@15.0.0
│ └── @angular/core@18.2.8 deduped
├─┬ @ngx-translate/http-loader@8.0.0
│ └── @angular/core@18.2.8 deduped
├─┬ ag-grid-angular@31.3.4
│ └── @angular/core@18.2.8 deduped
├─┬ highcharts-angular@4.0.1
│ └── @angular/core@18.2.8 deduped
├─┬ ng-alain@17.3.1
│ └─┬ @angular/cdk@17.3.10
│ └── @angular/core@18.2.8 deduped
├─┬ ng-zorro-antd@18.1.1
│ ├─┬ @angular/cdk@18.2.8
│ │ └── @angular/core@18.2.8 deduped
│ ├── @angular/core@18.2.8 deduped
│ └─┬ @ant-design/icons-angular@18.0.0
│ └── @angular/core@18.2.8 deduped
├─┬ ng2-konva@9.0.0
│ └── @angular/core@18.2.8 deduped
└─┬ ngx-mqtt@17.0.0
  └── @angular/core@18.2.8 deduped

 

已经修复完成。

 

总结：

  • 升级 @delon/theme 和 ng-zorro-antd 到 18.x 版本，以与 Angular 18.x 兼容。
  • 确保所有依赖使用一致的版本，避免 17.x 和 18.x 混用。
  • 删除 node_modules 并重新安装依赖，确保清除冲突的包。

 

技术 > 技术文档 > angular
#前端 #angular
记一次升级angular版本以及一些对应库造成的冲突错误R3InjectorError(Standalone[_ThingsModelTemplateComponent])[_DelonLocaleService -> _DelonLocaleService -> _DelonLocaleService]:
http://wizhiai.github.io/p/a9e7df9cca1d4403b6749e002238cb51/
作者
胡礼节
发布于
2024年10月16日
许可协议