Angular项目启动报错：@angular/flex-layout依赖缺失与npm依赖冲突求助

问题现象 #

1. 应用启动报错 #

Error: The target entry-point "@angular/flex-layout" has missing dependencies:
- ./flex-offset/flex-offset

at TargetedEntryPointFinder.findEntryPoints (file:///C:/Users/rquintela/OneDrive%20-%20FYSEG,%20S.A/Documents/Repos/PlanificadorFrontEndAngular/node_modules/@angular/compiler-cli/bundles/chunk-MMWD6KMJ.js:941:13)     
at file:///C:/Users/rquintela/OneDrive%20-%20FYSEG,%20S.A/Documents/Repos/PlanificadorFrontEndAngular/node_modules/@angular/compiler-cli/bundles/chunk-MMWD6KMJ.js:1264:33
at SingleProcessExecutorSync.doExecute (file:///C:/Users/rquintela/OneDrive%20-%20FYSEG,%20S.A/Documents/Repos/PlanificadorFrontEndAngular/node_modules/@angular/compiler-cli/bundles/chunk-MMWD6KMJ.js:1573:23)
at file:///C:/Users/rquintela/OneDrive%20-%20FYSEG,%20S.A/Documents/Repos/PlanificadorFrontEndAngular/node_modules/@angular/compiler-cli/bundles/chunk-MMWD6KMJ.js:1594:35
at SyncLocker.lock (file:///C:/Users/rquintela/OneDrive%20-%20FYSEG,%20S.A/Documents/Repos/PlanificadorFrontEndAngular/node_modules/@angular/compiler-cli/bundles/chunk-MMWD6KMJ.js:1765:14)
at SingleProcessExecutorSync.execute (file:///C:/Users/rquintela/OneDrive%20-%20FYSEG,%20S.A/Documents/Repos/PlanificadorFrontEndAngular/node_modules/@angular/compiler-cli/bundles/chunk-MMWD6KMJ.js:1594:19)
at mainNgcc (file:///C:/Users/rquintela/OneDrive%20-%20FYSEG,%20S.A/Documents/Repos/PlanificadorFrontEndAngular/node_modules/@angular/compiler-cli/bundles/chunk-MMWD6KMJ.js:2103:19)
at Module.process (file:///C:/Users/rquintela/OneDrive%20-%20FYSEG,%20S.A/Documents/Repos/PlanificadorFrontEndAngular/node_modules/@angular/compiler-cli/bundles/ngcc/index.js:34:10)
at NgccProcessor.processModule (C:\Users\rquintela\OneDrive - FYSEG, S.A\Documents\Repos\PlanificadorFrontEndAngular\node_modules\@ngtools\webpack\src\ngcc_processor.js:171:27)
at C:\Users\rquintela\OneDrive - FYSEG,    S.A\Documents\Repos\PlanificadorFrontEndAngular\node_modules\@ngtools\webpack\src\ivy\host.js:150:18

Node.js v18.12.1

2. npm install依赖解析错误 #

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/cdk@10.2.7
npm ERR! Found: @angular/common@13.3.1
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^13.3.1" from the root project
npm ERR!   peer @angular/common@">=11.0.0" from @angular/flex-    layout@11.0.0-beta.33
npm ERR!   node_modules/@angular/flex-layout
npm ERR!     @angular/flex-layout@"^11.0.0-beta.33" from the root project
npm ERR!   4 more (@angular/forms, @angular/platform-browser, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^10.0.0 || ^11.0.0-0" from @angular/cdk@10.2.7
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"^10.2.7" from the root project
npm ERR!   peer @angular/cdk@"10.2.7" from @angular/material@10.2.7
npm ERR!   node_modules/@angular/material
npm ERR!     @angular/material@"^10.2.7" from the root project
npm ERR!     1 more (@angular/material-moment-adapter)
npm ERR!
npm ERR! Conflicting peer dependency: @angular/common@11.2.14
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^10.0.0 || ^11.0.0-0" from @angular/cdk@10.2.7
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^10.2.7" from the root project
npm ERR!     peer @angular/cdk@"10.2.7" from @angular/material@10.2.7
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^10.2.7" from the root project
npm ERR!       1 more (@angular/material-moment-adapter)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\rquintela\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\rquintela\AppData\Local\npm-cache\_logs\2023-01-11T15_22_18_501Z-debug-0.log

当前package.json相关依赖 #

"@angular/cdk": "^10.2.7",
"@angular/common": "^13.3.1",
"@angular/compiler": "^13.3.1",
"@angular/core": "^13.3.1",
"@angular/flex-layout": "^11.0.0-beta.33",

解决方案 #

核心问题是Angular核心包（13.x）与CDK/Material（10.x）、flex-layout（11.x）版本不兼容，需统一到兼容版本组合，推荐优先升级生态包适配核心版本：

方案一：升级CDK、Material、flex-layout到适配Angular 13的版本 #

1. 卸载现有不兼容包：

npm uninstall @angular/cdk @angular/material @angular/flex-layout

2. 安装对应Angular 13的兼容版本：

npm install @angular/cdk@^13.3.9 @angular/material@^13.3.9 @angular/flex-layout@^13.0.0-beta.38

3. 清理缓存并重装依赖：

npm cache clean --force
# Windows系统执行以下命令
rmdir /s /q node_modules
del package-lock.json
# macOS/Linux系统执行以下命令
# rm -rf node_modules package-lock.json
npm install

方案二：降级Angular核心包到11.x版本（不推荐，Angular 11已停止维护） #

若需保留现有CDK/Material版本，可将Angular核心包降级到11.x：

npm install @angular/common@^11.2.14 @angular/compiler@^11.2.14 @angular/core@^11.2.14

随后清理缓存并重装依赖，步骤同方案一。

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