Ionic-app-scripts: Ionic serve not working properly with html5mode / location path strategy

[coperator]

When I use ionic serve I expected the dev server to support the PathLocationStrategy, which I enabled in the app.modules.ts with

  providers: [
   ...
    { provide: LocationStrategy, useClass: PathLocationStrategy }
   ...
  ]

The angular routing part works fine, but the dev server does not support the url rewrite back to index.html, which is a show stopper. If the missing support is intende, I would storngly propose to add this feature. For example, Angular's ng serve does support this out of the box.

This topic also appears in the forum, e.g.
https://forum.ionicframework.com/t/url-routing-without-hash/81140/2
https://forum.ionicframework.com/t/ionic-deeplinker-angular-html5mode-urls-without/74530/2

My current setup

cli packages:
    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

local packages:

    @ionic/app-scripts : 2.1.4
    Ionic Framework    : ionic-angular 3.6.1

System:

    Node : v8.4.0
    npm  : 5.3.0 
    OS   : Windows 10

[landru29]

+1

[ericeslinger]

I just added app.get(/^[\w\/]*$/, serveIndex); to right before the end of createHttpServer, although note that you need to put a <base href="/"> or its equivalent way at the top of index.html as well, or else the injected stuff (__ion_dev_server, etc) won't load properly.

That regex should match all alphanumeric characters plus slashes - I don't like accidentally serving the index when I meant to grab a .css file that doesn't exist (or some other static in assets), it's harder to interpret the resultant errors.

this is, of course, brittle - I manually wrote to the script in node_modules because I'm not sure I want to figure out the ins and outs of doing this the right way well enough to emit a PR over it (ideally, there'd be a commandline switch that injects the base href tag and adds the appropriate fallback route to the express devserver).

[longgt]

https://github.com/ionic-team/ionic-app-scripts/pull/916

[jonwestwood]

I just added app.get(/^[\w\/]*$/, serveIndex); to right before the end of createHttpServer, although note that you need to put a <base href="/"> or its equivalent way at the top of index.html as well, or else the injected stuff (__ion_dev_server, etc) won't load properly.

That regex should match all alphanumeric characters plus slashes - I don't like accidentally serving the index when I meant to grab a .css file that doesn't exist (or some other static in assets), it's harder to interpret the resultant errors.

this is, of course, brittle - I manually wrote to the script in node_modules because I'm not sure I want to figure out the ins and outs of doing this the right way well enough to emit a PR over it (ideally, there'd be a commandline switch that injects the base href tag and adds the appropriate fallback route to the express devserver).

thank you! this was such an easy fix I can't believe it doesn't happen automatically with IonicModule.forRoot(MyApp, {
locationStrategy: 'path'
}),

[jayvdb]

There is a PR https://github.com/ionic-team/ionic-app-scripts/pull/1339

and another issue begging for this feature at https://github.com/ionic-team/ionic-app-scripts/issues/974