@angularclass/hmr breaks angular 12.x builds

[NateRadebaugh]

@angularclass/hmr breaks angular 12.x builds

When updating to angular 12 with an existing setup, I had terrible build performance. After recreating my setup step by step, I uncovered that this library was partially to blame for the builds taking so long.

What I did to get around this issue:

1. Make sure git is set up and everything is checked in.
2. Delete the existing app folder/contents
3. Using angular CLI to create a new blank app in the spot where the old one was
4. Looking at the git status (eg on vs code) One by one, revert the deletes for non-build related files like your app components, services, directives, pipes, etc.
5. Slowly restore everything except the custom HRM config, angular.json, tsconfig, and package.json/lock files. (Manually npm install dependencies until your package.json is mostly back to how it was)
   • Custom HMR setups like @angularclass/hmr seem to conflict with the "out of the box" supported --hmr in the latest version of angular
6. Rebuild. Somehow magically the updates to your tsconfig and angular.json has made the build take ~4 minutes.

Angular 11: 8 minutes Ng update to 12: 24 minutes Recreate as 12: 4 minutes

Why/how? My guess is the automatic migrations aren't working correctly, and so far what others are reporting is that the cache stuff in 12 with webpack 5 is busted with the migrations as is. Migrations also aren't able to detect unsupported dependencies.

https://github.com/angular/angular-cli/issues/20713#issuecomment-859974230

Suggestion: add a comment to the readme of this package. Optionally deprecate/archive this library since it is obsolete with angular 12.x

[Rush]

For me it works just fine. I just upgraded to Angular 13 and HMR works with @angularclass/hmr. Without @angularclass/hmr HMR doesn't work.