Hot Module Replacement in angular 11

Question

I have an angular 10 project that I opened at work. after a while, when I saw that HMR added to angular 11 I upgraded the project by trying to work with HMR. Since it didn't, I opened a brand new angular project. checked that HMR working. I moved all components, services, modules, styles (without node folder of course) and launched it using ng serve --hmr and it failed to work again. the page is being refreshed.

I am on this 2 days. Any idea will be appreciated? thank you. my package JSON is:

{
  "name": "date-manager-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.4",
    "@angular/cdk": "^11.2.3",
    "@angular/common": "~11.2.4",
    "@angular/compiler": "~11.2.4",
    "@angular/core": "~11.2.4",
    "@angular/forms": "~11.2.4",
    "@angular/material": "^11.2.3",
    "@angular/platform-browser": "~11.2.4",
    "@angular/platform-browser-dynamic": "~11.2.4",
    "@angular/router": "~11.2.4",
    "angular2-text-mask": "^9.0.0",
    "bootstrap": "^4.6.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.3",
    "@angular/cli": "~11.2.3",
    "@angular/compiler-cli": "~11.2.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

update: i opened a new brand angular 11 project, ran with --hmr. i written alert() at AppComponent's ngOnInit. i see that on each save, ngOnInit is called ( alert pops up). so, all code, ajax calls will be executed. isnt hmr suppose to bypass that? if all code under ngOnInit executed, how hmr is helpful. what am i missing here?

export class AppComponent {
  title = 'AppTest';

  ngOnInit(): void {
    alert();
  }
}

user_1640693 · Answer

Lets do it step by step.

Install the required hmr angular package.

npm install @angularclass/hmr --save-dev

Add a new environment file called environment.hmr.ts inside your src/environments folder
```
export const environment = {
  production: false,
  hmr: true
}
```

Update 'build' & 'serve' properties in the angular.json

 "build": {
   "configurations": {
      //
     "hmr": {
        "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.hmr.ts"
         }
        ]
     }
     //
   }
 }

 "serve": {
     "configurations": {
         //
         "hmr": {
            "hmr": true,
            "browserTarget": "date-manager-ui:build:hmr"
         }
         //
     }
 }

Add 'node' into the types array in compilerOptions in src/tsconfig.app.json file.
```
{
  //
  "compilerOptions": {
     //
     "types": ["node"]
  }
  //
}
```
Now we need to add the hmr property with value 'false' in all other environment files except the newly added environment.hmr.ts file
```
export const environment = {
  //
  hmr: false
}
```

Lets configure our app to use hmr by creating a new file named hmr.ts inside src folder and finally by updating main.ts file as well.

//hmr.ts
import { NgModuleRef, ApplicationRef } from '@angular/core'
import { createNewHosts } from '@angularclass/hmr'

export const hmrBootstrap = (
  module: any,
  bootstrap: () => Promise>
) => {
let ngModule: NgModuleRef
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 { environment } from './environments/environment'
import { hmrBootstrap } from './hmr'
import { RootModule } from './app/root/root.module'

if (environment.production) {
  enableProdMode()
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(RootModule)

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))
}

Final step. Add hmr property in scripts object in the package.json file to make running app easier.
```
"scripts": {
  //
  "hmr": "ng serve --configuration hmr"
}
```

user_3927340 · Answer

Updated to angular 12 today. hmr started working.

Hot Module Replacement in angular 11

2 Answers