Angular converting project to PWA, Dependencies error?-CodePudding

I am getting issues dynamically loading components using the following syntax:

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;

I get the following console error.

ChunkLoadError: Loading chunk 592 failed.

So I thought I would try what this link goes through, turning the app into a PWA

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

But when I run the command

ng add @angular/pwa --project user

I get an error as shown

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: [email protected]
npm ERR! Found: @angular/[email protected]
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/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.16" from @angular/[email protected]
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\_logs\2022-02-07T10_57_36_373Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

These are my dependencies in the package.json file

"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"
  },

How can I get this to work as I have no idea what the issue is, apart from confusing version conflicts for some reason?

I have also tried what Pankaj has said.

So I ran this with the version

ng add @angular/[email protected]

but I still get this error

npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
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/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.16" from @angular/[email protected]
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.

CodePudding user response：

You have a dependency conflict.

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

The error message says that you are installing @angular/service-worker version '12.2.16' which internally depends on @angular/core version '12.2.16'.

Your package.json has @angular/core version '12.1.3'.

So, you need to install the @angular/pwa not with @latest but with the version that's compatible with your current setup.

Install it with ng add @angular/[email protected]

CodePudding user response：

The answer thus far was to remove this line and just use it directly from the import at the top.

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

Now it looks like this

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;

We then dont get the extra js file and dont have a problem. But would have been nice to figure out how to lazy load it, but I see that there is maybe routing lazy loading that we might be able to use.