Ionic template SPA server not working properly

[ratkosolar]

I'm submitting a...

[x ] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

If I create a test component (doesn't matter what it does) and add a routing example like below:

const routes: Routes = [
  { path: 'login', component: LoginComponent, data: { title: extract('Login') } },
  { path: 'test/:testId', component: TestComponent, data: { title: extract('Test') } }
];

Going to http://localhost:4200/test/randomId doesn't work. All of the script tags are getting 404 error because its trying to load them from "test" folder - http://prntscr.com/ifskud

However if I load the login component view first and the navigate to test component view, it works fine.

Environment

The issue only appears when working with Ionic generated templates.

{
  "generator-ngx-rocket": {
    "version": "3.2.1",
    "props": {
      "appName": "test5",
      "target": [
        "web",
        "cordova"
      ],
      "pwa": false,
      "mobile": [
        "ios",
        "android"
      ],
      "ui": "ionic",
      "auth": true,
      "projectName": "test-5",
      "packageManager": "npm"
    }
  }
}

Possible solution

I noticed that only Ionic generated templates have this in index.html:

<base href="./"/>

Changing it to this seems to fix the issue

<base href="/"/>

I was just wondering if this change might break something else as if there might be a specific reason Ionic templates use a different base href?

[sinedied]

Thanks for reporting the issue.
The <base href="./"/> is not specifically for Ionic, but whenever Cordova target is enabled as it is needed for apps to works with Cordova on iOS 😕

It was a quick workaround but since it causes issues with routing, I have to find something else...

[sinedied]

I posted an issue on the related ionic plugin: ionic-team/cordova-plugin-ionic-webview#77

[PerfectedApp]

@sinedied , I think this post might be somehow related as they talk about the issues of base href: angular/angular#13948

[sinedied]

The only workable fix for this until (if) ionic-team/cordova-plugin-ionic-webview#77 is fixed, is to remove <base href="/"/> completely and switch Angular to legacy hashbang routing instead of HTML5 routing 😞
I'll create a PR to implement this only for cordova-based target, even though I tried to avoid it in first place.

[sinedied]

@ALander26 I just tried with the <script>document.write('<script>document.write('<base href="' + document.location + '" />');</script> solution suggested in your linked issue, and the behavior is the same as with <base href="./"/>: it works for Cordova, but not for subroutes unless legacy hashbang routing is enabled.

But on the same idea, I tried:

<script>document.write('<base href="' + (/^localhost:8080/.test(location.host) ? './' : '/') + '" />');</script>

which works as it now uses ./ only for ios (which runs on a local server), but this still feel hack-ish 😕
Cordova apps should not suffer from having a ./ base href as you cannot "F5" them, they will always load from root.

[sinedied]

After a bit of research, I just found that angular-cli builds supports the --base-href option to change the <base> tag on build, so I will always set it to / and just use the --base-href="./" option when building for cordova through @ngx-rocket/scripts.

Seems the best way to fix this I think 😄

[ratkosolar]

@sinedied Indeed seems like the best solution. I was already thinking of doing it manually before building.
Thanks for your quick responses!