I am trying to get Hot Module Replacement to work.
When running: npm install && ng build --configuration development && ng serve --hmr
no error is thrown. However, all the paths proxied via the proxy.conf.js
are not working to be displayed in the frontend and the following page is shown:
In general, I am working on an application generated with J-Hipster that uses proxy.conf.js
and webpack.custom.js
to generate the proxying. Everything works fine on paths that are not proxied via proxy.conf.js
. The backend is running on port 8080.
I would appreciate any hint about what is going on here.
My prox.conf.js:
function setupProxy({ tls }) {
const conf = [
{
context: [
'/api',
'/oauth2Config',
'/oauth2',
'/services',
'/management',
'/swagger-resources',
'/v3/api-docs',
'/h2-console',
'/auth',
'/health',
],
target: `http${tls ? 's' : ''}://localhost:8080`,
secure: false,
changeOrigin: tls,
},
];
return conf;
}
module.exports = setupProxy;
The relevant part of the webpack.custom.js:
if (targetOptions.target === 'serve' || config.watch) {
config.plugins.push(
new BrowserSyncPlugin(
{
host: 'localhost',
port: 9001,
https: tls,
proxy: {
target: `http${tls ? 's' : ''}://localhost:4200`,
ws: true,
proxyOptions: {
changeOrigin: false, //pass the Host header to the backend unchanged https://github.com/Browsersync/browser-sync/issues/430
},
},
socket: {
clients: {
heartbeatTimeout: 60000,
},
},
/*
ghostMode: { // uncomment this part to disable BrowserSync ghostMode; https://github.com/jhipster/generator-jhipster/issues/11116
clicks: false,
location: false,
forms: false,
scroll: false,
},
*/
},
{
reload: targetOptions.target === 'build', // enabled for build --watch
}
)
);
}