Convert to Ionic-Angular app to PWA

Ionic Framework ionic-v3
1

Hi all, I’d like the ionic-angular app that I’ve been developing be able to work without an internet connection to the extent possible. I’ve realized now that it doesn’t work as a PWA out of the box because the app requests various chunks from the server only when they are needed.

For example, an ionicon svg only gets requested when it would be shown on mouseover, and when I try to navigate from my landing page component to another page I get errors like “Loading chunk node_modules_ionic_core_dist_esm_ion-alert_entry_js failed.”

I need advice on how to make the necessary changes to my application configuration so that it works as a PWA as well as an online web app? Ultimately I want it to work on IOS, Android, and the Web whether or not there’s an internet connection. For what it’s worth, I have been building the app in the context of an Nx workspace.

2

I’ve tried doing this:
:white_check_mark: npm install @angular/pwa --save-dev --legacy-peer-deps
:x: npx nx g @angular/pwa:ng-add --project my-project-name

… and it fails with:
NX A merge conflicted on path “/apps/my-project-name/src/manifest.webmanifest”.

3

This is your 1st issue. All sorts of issues will arise. NPM packages won’t install. You need internet…

4

I have not been clear enough, I want the app to work without internet connectivity, but I do have internet connectivity while developing.

A quick update, I was able to solve my problem in the original post by adding a file to my project root called “.npmrc” and making it contain “legacy-peer-deps=true”