Ionic template SPA server not working properly

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]

The only workable fix for this until (if) https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/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]

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…