Ionic App not serving correctly on web after Ionic 5 to Ionic 6 and Angular 10 to Angular 13 migration (baseHref issue?)

Ionic Framework
1

We have an Ionic application which we have just migrated from Ionic 5 to Ionic 6 and Angular 10 to Angular 13. The app is served on the web as well as deployed to the native Android and iOS Stores.

When we deploy to the web server the app does not load and we get errors. The problem seems to be that the baseHref setting in our angular.json file is now being ignored.

In angular.json we have one configuration for our device builds and one for our web builds. In the web build configuration we have this:

"baseHref": "/web/"

This works find when we deploy out Ionic 5 / Angular 10 web files but when we deploy the migrated app we get errors loading asset files where it tries to load from

https://server-name/styles.7a9185c86c702a3f.css

where it should be loading from

https://server-name/web/styles.7a9185c86c702a3f.css

I can’t find any documentation anywhere for Angular 11, 12 or 13 that suggests there was a breaking change for this. Does anyone know what I need to do in my angular.json file to get this to work?

2

Just noticed that the index.html file has

<base href="/">

in it instead of

<base href="/web/">

so the build process is definitely ignoring that setting

3

@mhartington sorry for tagging you but you marked my comment above as a solution but in fact it’s not - I was just confirming my point that the angular.json setting is now being ignored in Angular 13. We do our builds in AppFlow and I have two configurations - one for Device builds and one for Web builds. The Web configuration needs the build to result in a base href of “/web/” in the index.html so in the angular.json file for the web configuration I have the baseHref setting of "/web/. With Angular 10 our AppFlow builds work and the index.html generated correctly has the “/web/” in it but in Angular 13 they only have “/” in i.e the baseHref setting is now being ignored Do you know how I can get round this on AppFlow rather than manually editing my index.html file afterwards? If I was building locally I think I could specify the href in the build command just for the web builds but on Appflow I don’t have that option (as far as I’m aware?) I’m guessing in Angular 13 I need to specify things differently but I can’t find details anywhere?

4

So I just tested this out with a new starter project to validate it first.

<!-- src/index.html -->
<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />

Added the following to my angular.json’s build options

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "baseHref": "/web/",

ran ng build and open the www/index.html.

<!-- www/index.html -->
<head>
  <meta charset="utf-8"/>
  <title>Ionic App</title>

  <base href="/web/"/>

I also checked with the angular folks and they said that the CLI should be updating the baseHref

So you might need to review your @angular-devkit/build-angular to make sure you have the latest release. Since app flow is just running a normal build, you should be able to replicate this locally.

5

Hi, I have recently updated from Ionic 5 to 6 and updating my App on my webserver. and its not loading up at at all. Please check https://aardra.app/

I am getting the following error on console web browser

https://aardra.app/styles-es2015.js net::ERR_ABORTED 404

And

When it seems it trying to login and outputting a 500 (Internal Server Error).

And the following:

ERROR Error: Uncaught (in promise): Error: Not implemented on web.
Error: Not implemented on web.
    at u.unimplemented (main-es2015.js:1:262205)
    at 6141-es2015.js:1:531
    at Generator.next (<anonymous>)
    at r (main-es2015.js:1:851153)
    at a (main-es2015.js:1:851355)
    at main-es2015.js:1:851414
    at new e (polyfills-es2015.js:1:18620)
    at main-es2015.js:1:851296
    at u.getInfo (6141-es2015.js:1:573)
    at main-es2015.js:1:259448
    at w (polyfills-es2015.js:1:17578)
    at polyfills-es2015.js:1:16661
    at a (main-es2015.js:1:839835)
    at e.invoke (polyfills-es2015.js:1:7590)
    at Object.onInvoke (main-es2015.js:1:147136)
    at e.invoke (polyfills-es2015.js:1:7530)
    at t.run (polyfills-es2015.js:1:2674)
    at polyfills-es2015.js:1:18380
    at e.invokeTask (polyfills-es2015.js:1:8274)
    at Object.onInvokeTask (main-es2015.js:1:146952)
wr @ main-es2015.js:1

But when i do an Ionic Serve its working well.