Can't deploy with Ionic 4 build output ( /www )!

emsdeveloper · March 8, 2019, 3:57am

I have started a new Ionic 4 project and have began to slowly migrate over pieces of an Ionic 3 app. Everything about Ionic 4 has been great so far, except deployment. Developing and serving locally causes no issues and the app runs fine, but early on I happened to notice the output in the /www directory was very different from what I was used to in Ionic 3. I decided to copy over and try to run the app on a web server like I had always done. With Ionic 4, this is causing issues and giving me a “Failed to load resource: net::ERR_FILE_NOT_FOUND” error for a few files. I desperately need to figure this out soon, so I can decide if it will be worth continuing the upgrade, or sticking with Ionic 3. Help will be very much appreciated.

After being presented with a blank screen, here’s the browser console

Heres the output in /www in Ionic 4

/www output I was used to in Ionic 3, that worked fine

Here is the code repository - https://github.com/emsdeveloper/Ionic4

reedrichards · March 8, 2019, 5:02am

Did you copy everything (**/*) from the www folder to your web server?
Did you build your app running ionic build --prod before deploy?

Beside that, I tried your project locally (I used lite-server to serve the www), seems a CSP is missing, at least that’s the error I get

emsdeveloper · March 8, 2019, 5:05am

Yes, I did both of those steps.

reedrichards · March 8, 2019, 5:16am

And the CSP you are on it?

emsdeveloper · March 8, 2019, 5:22am

A little embarrassed to say I’m not sure I understand that question.

reedrichards · March 8, 2019, 5:34am

No worries, see my screenshot above, have you try to define the requested Content Security Policy (https://content-security-policy.com)?

Not sure you are facing the same error but maybe you are and that’s why no js are loaded

emsdeveloper · March 8, 2019, 5:40am

I have not yet seen that error message on my end, and I’ve never had to define anything like that before. Not sure where to begin

reedrichards · March 8, 2019, 5:48am

as you wish, I can’t tell more sorry, that’s error I’m facing with you project. good luck then

emsdeveloper · March 8, 2019, 3:03pm

It was an issue with <base href="/"> in index.html not being set to the correct subdirectory. I was so used to navigation in Ionic 3 I forgot how differently Angular router behaved.

reedrichards · March 8, 2019, 3:15pm

Cool cool cool, well done

Lakshmareddy · March 8, 2019, 3:27pm

Either you can use like that: