Webpack Undertow JHipster configuration

Question

I have a JHipster monolith application based on Angular 5. I am not able to replicate the configuration that I did to webpack through the webpack.dev.js file to the undertow when I compile and run under production profile.

Here are the important lines of my webpack.dev.js file:

module.exports = webpackMerge(commonConfig({ env: ENV }), {
    devtool: 'eval-source-map',
    devServer: {
        contentBase: './target/www',
        historyApiFallback: {
            index: '/MyApp/'
        },
        publicPath: "/MyApp/",

I have changed the Location strategy to a Custom one because I wanted to support both the HashLocationStrategy and the PathLocationStrategy at the same time. Plus I need the urls to be bookmarkable. Basically emulate the paths of an MVC and old angular applicaiton that is why I do this.

providers: [
    { provide: APP_BASE_HREF, useValue: '/MyApp' },
    { provide: LocationStrategy, useClass: CustomLocationStrategy },

and the custom location strategy:

import { Injectable } from '@angular/core';
import { HashLocationStrategy } from '@angular/common';

@Injectable()
export class CustomLocationStrategy extends HashLocationStrategy {
    prepareExternalUrl(internal: string): string {
        let url = this.getBaseHref() + '/#' + internal;
        if (internal === '/login') {
            url = this.getBaseHref() + internal;
        }
        return url;
    }
}

Now everything works ok under the development profile. For example the http://localhost:8080/ redirects me correctly to the http://localhost:8080/MyApp/login and if I reload the http://localhost:8080/MyApp/login I land at the same page (no 404). So these are bookmarkable as well.

But under production profile there are no proxy, history api fallback and publicPath variables.

Thus when I hit the http://localhost:8080 I receive a 404. When I hit the localhost:8080/MyApp works ok. When I hit the http://localhost:8060/MyApp/login I receive the:

A parser-blocking, cross site (i.e. different eTLD+1) script, https://linkhelp.clients.google.com/tbproxy/lh/wm?sourceid=wm&url=http%3A%2F%2Flocalhost%3A8060%2FMyApp%2Flogin&hl=en&site=localhost%3A8060&error=http404&js=true, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

and here is a screenshot:

Thus the links are not bookmarkable. In production I am using NgInx as a reverse proxy. Could I somehow use this in order to emulate webpack/NodeJs ? I haven't managed yet unfortunately. Or it is possible to do the same with the tools that I already have (undertow, webpack under the prod profile?

Any suggestions how to solve this situation would be greatly appreciated.

UPDATE 2.1: I have followed your comments Gael. I have included the filter with some additional patterns and indeed all requests give back now a 200 - OK response. When I hit the http://localhost:8060/MyApp/login all the requests return 200 but at the console I see

Uncaught SyntaxError: Unexpected token <

here is a screenshot as well:

I have returned the appropriate content type as well based on the extension of the file that I return:

1. text/javascript for the js files
2. text/css for the css files
3. and text/html for all the rest

Do you have any pointers please?

Thank you!