Ionic 4 - Anyone got a production build working for PWA?

Ionic Framework
1

Ionic 4 trying to do a production build on the starting template (ie myApp -> tab app with ‘World your oyster’). I update my script in package.json to allow for production outputs (“build”: “ng build --prod”). I run ‘ionic build’. Everything renders as expected. But when I go to the www folder and open index.html I get the following error in the console:

[Error] Not allowed to load local resource: file:///runtime.js
[Error] Not allowed to load local resource: file:///polyfills.js
[Error] Not allowed to load local resource: file:///styles.js
[Error] Not allowed to load local resource: file:///vendor.js
[Error] Not allowed to load local resource: file:///main.js

In Ionic 3 I usually deploy the files in www folder to my webserver to run as PWA. I expect opening the index.html file in www should run the PWA as per Ionic 3.

I haven’t changed anything in the myApp template. Also checked permissions in the folder R&W is applied for all the files. Anyone else got this working?

PS I am using a macOS High Sierra 10.13.6

2

Check your base href.

I have heard that a base href of ./ will work. However, I did not know this at the time I changed the base href to everything to the right of .com in my domain name.

1 Like
3

Ok the issue was because I am running locally I need to run the files through a webserver otherwise I get the local resource error. This wasn’t the case for Ionic 3 builds.

Anyone else have this issue the fix is easy:
I added the following extension in chrome

I select the app, choose my www folder. It gives me a URL (like 127.0.0.1:port you chose) and I open it up in chrome. Works like a charm.

4

danieldugger bro i don’t know how can I thank you. Keep hearing things like this

1 Like
5

Glad to hear it worked!