Angular 13 HMR

There are just two steps required for adding HMR to Angular 13:

1. Enable HMR - I chose to change my package.json and added a new option:

   "start:hmr": "ng serve --hmr"

2. Make sure your root component is inside the body tag.

   In my use case, I had the following:

   <body app-demo></body>
   

   And had to replace it with:

   <body>
   	<app-demo></app-demo>
   </body>
   

   I also changed the app.component.ts selector to match (from body[app-demo] to app-demo).

Yeah, that’s about it.

Warning: There are a lot of guides linking to https://github.com/PatrickJS/angular-hmr (@angularclass/hmr) but I did not find them useful or working.

This post was written for Angular 13.2.1.