I recently updated my angular app to the latest versions. And after a night of nightmares of bug, I got everything working except for HMR. I am badly stuck with it. Following are my configurations according to the the HMR Story on Angular CLI wiki:
angular.json
"build": {
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"serve": {
"configurations": {
"hmr": {
"hmr": true,
"browserTarget": "appHit:build:hmr"
},
}
},
hmr.js
import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
let ngModule: NgModuleRef<any>;
module.hot.accept();
bootstrap().then(mod => ngModule = mod);
module.hot.dispose(() => {
const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
const elements = appRef.components.map(c => c.location.nativeElement);
const makeVisible = createNewHosts(elements);
ngModule.destroy();
makeVisible();
});
};
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';
if (environment.production) {
enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.hmr) {
if (module[ 'hot' ]) {
hmrBootstrap(module, bootstrap);
} else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
bootstrap().catch(err => console.log(err));
}
I tried the following commands:
ng serve --hmr
ng serve --hmr --configuration hmr
ng serve --configuration hmr
Everything gets compiled on change and even the events fired are cached in browser but nothing happens after HMR logs the following:
[WDS] App updated. Recompiling...
[WDS] App hot update...
I am totally lost at this point. Any kind of help will be very much appreciated. Thanks
ng-hot-reload is a tool focused on making UI development more pleasant with AngularJS.
Hot Module Replacement (HMR) is a Webpack feature to update code in a running app without rebuilding it. This results in faster updates and less full page-reloads. In order to get HMR working with Angular CLI we first need to add a new environment and enable it.
We faced the same problem. It was solved it by removing Webpack related dev dependencies and performing a fresh npm install.
rm -R package-lock.json node_modules
npm cache clean --force
npm i
Hope it can help.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With