Angular 将项目转换为 PWA，依赖项错误？

Question

我在使用以下语法动态加载组件时遇到问题：

this.dynamicContentPlacehold.clear();
const { AccountManagerComponent } = await import('./account-manager/account-manager.component') 
const factory = this.componentFactoryResolver.resolveComponentFactory(AccountManagerComponent);
const componentRef = this.dynamicContentPlacehold.createComponent(factory);     
componentRef.instance.user = this.user;

我收到以下控制台错误。

ChunkLoadError: Loading chunk 592 failed.

所以我想我会尝试这个 link 经历的事情，将应用程序变成 PWA

https://medium.com/fieldcircle/error-loading-chunk-xx-failed-with-angular-lazy-loaded-modules-6c5b1b6f8b8d

但是当我运行命令

ng add @angular/pwa --project user

我收到如图所示的错误

PS C:\Projects\user> ng add @angular/pwa --project user
ℹ Using package manager: npm
✔ Found compatible package version: @angular/pwa@latest.
✔ Package information loaded.

The package @angular/pwa will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
CREATE ngsw-config.json (631 bytes)
CREATE ClientApp/src/manifest.webmanifest (1332 bytes)
CREATE ClientApp/src/assets/icons/icon-128x128.png (1253 bytes)
CREATE ClientApp/src/assets/icons/icon-144x144.png (1394 bytes)
CREATE ClientApp/src/assets/icons/icon-152x152.png (1427 bytes)
CREATE ClientApp/src/assets/icons/icon-192x192.png (1790 bytes)
CREATE ClientApp/src/assets/icons/icon-384x384.png (3557 bytes)
CREATE ClientApp/src/assets/icons/icon-512x512.png (5008 bytes)
CREATE ClientApp/src/assets/icons/icon-72x72.png (792 bytes)
CREATE ClientApp/src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (4222 bytes)
UPDATE package.json (2082 bytes)
UPDATE ClientApp/src/app/app.module.ts (4421 bytes)
UPDATE ClientApp/src/index.html (303 bytes)
⠧ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: user@0.0.0
npm ERR! Found: @angular/core@12.1.5
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^12.1.3" from the root project
npm ERR!   peer @angular/core@"^12.0.0 || ^13.0.0-0" from @angular/cdk@12.2.0
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^12.1.3" from the root project
npm ERR!   10 more (@angular/common, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^12.1.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@12.2.16
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.16" from @angular/service-worker@12.2.16
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"^12.1.3" from the root project
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\me\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\me\AppData\Local\npm-cache\_logs22-02-07T10_57_36_373Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

这些是我在 package.json 文件中的依赖项

"dependencies": {
    "@angular-devkit/build-angular": "~12.1.3",
    "@angular/animations": "^12.1.3",
    "@angular/cdk": "^12.1.3",
    "@angular/common": "^12.1.3",
    "@angular/compiler": "^12.1.3",
    "@angular/core": "^12.1.3",
    "@angular/forms": "^12.1.3",
    "@angular/platform-browser": "^12.1.3",
    "@angular/platform-browser-dynamic": "^12.1.3",
    "@angular/router": "^12.1.3",
    "@angular/service-worker": "^12.1.3",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@schematics/angular": "^12.1.3",
    "@sentry/browser": "^6.10.0",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "ngx-cookie-service": "^12.0.0",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primeng": "^12.0.1",
    "raven-js": "^3.27.2",
    "rxjs": "^7.2.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

我不知道问题出在哪里，除了由于某种原因造成混乱的版本冲突外，我怎样才能让它工作？

我也尝试过 Pankaj 所说的。

所以我运行这个版本

ng add @angular/pwa@12.1.3

但我仍然收到此错误

npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: user@0.0.0
npm ERR! Found: @angular/core@12.1.5
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^12.1.3" from the root project
npm ERR!   peer @angular/core@"^12.0.0 || ^13.0.0-0" from @angular/cdk@12.2.0
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^12.1.3" from the root project
npm ERR!   10 more (@angular/common, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^12.1.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@12.2.16
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.16" from @angular/service-worker@12.2.16
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"^12.1.3" from the root project
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\me\AppData\Local\npm-cache\eresolve-report.txt for a full report.

Answer 1

您有依赖冲突。

@angular/pwa internally adds @angular/service-worker package for you.

错误消息说您正在安装 @angular/service-worker 版本“12.2.16”，它在内部依赖于 @angular/core 版本“12.2.16”。

您的 package.json 有 @angular/core 版本“12.1.3”。

因此，您需要安装 @angular/pwa 而不是 @latest，而是与您当前设置兼容的版本。

使用 ng add @angular/pwa@12.1.3

安装

Answer 2

到目前为止的答案是删除这一行并直接从顶部的导入中使用它。

const { AccountManagerComponent } = await import('./account-manager/account-manager.component')

现在看起来像这样

import { AccountManagerComponent } from './account-manager/account-manager.component';

...

this.dynamicContentPlacehold.clear();
const factory = this.componentFactoryResolver.resolveComponentFactory(AccountManagerComponent);
const componentRef = this.dynamicContentPlacehold.createComponent(factory);     
componentRef.instance.user = this.user;

然后我们没有得到额外的 js 文件并且没有问题。但是如果能弄清楚如何延迟加载它会很好，但我看到我们可能可以使用路由延迟加载。

我后来尝试了一个没有 PWA 的新项目和延迟加载生成额外 .js 文件的组件并且它工作正常，所以想象一下配置不匹配，因为问题项目较旧并且已经完成了所有工作

Angular 将项目转换为 PWA，依赖项错误？

Angular converting project to PWA, Dependencies error?

progressive-web-apps

angular