Angular converting project to PWA, Dependencies error?

user_4027438 0
Viewed 675

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: 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\_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/pwa@12.1.3

but I still get this error

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.
progressive-web-apps angular
2 Answers

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/pwa@12.1.3

user_106026790

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.

I later tried a new project with no PWA and lazy loading of components that generate the extra .js files and it worked fine, so imagine there is some config mismatch as the problem project is older and has has all sorts done to it.

user_40274380
Related