After building an ionic v3 app with ionic build, I am able to open the index.html file in my browser to test the app.
However with an ionic v4 app, if I open the index file I get a blank page. Inspecting the network tab shows that it is unable to fetch the app resources (runtime.js, polyfill.js, styles.js, vendor.js, main.js and favicon.png).
I can resolve the loading issue by commenting out the <base href="/" /> in index.html, but I still get a blank page, with the error Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
I am testing with a new blank template in both cases. I have the same issue if I use --prod.
Steps to reproduce:
ionic start test blank --type=angular
cd test
ionic build
Open index.html in browser.
What am I doing wrong?
To test in the browser you usually use ionic serve.
ionic build is for uploading to a server and calling via a domain or subdomain.
I was using ionic build --prod to upload to my server, but noticed this problem. The local test has the same problem as I have when I load it to my server.
Are you uploading to a subfolder of your server? I think this currently assumes to live in /.
Yes. I have a couple of projects hosted on the same server.
I will try changing the base reference and then test on server again.
It might be wort reporting this as an issue, because the default Ionic v4 template maybe should not make it harder to host your project in a subfolder or locally via file://... (which of course also in a subfolder)
Changing the base reference in index.html to the path on my server works for deployed version, but I can’t test locally.
I have created an issue for this: https://github.com/ionic-team/ionic-cli/issues/3555
Yeah, locally there is no real “base” as it is really just loading the file from the file system.