title: Hot Module Replacement in angular 11
body: <p>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 <code>ng serve --hmr</code> and it failed to work again. the page is being refreshed.</p>
  <p>I am on this 2 days. Any idea will be appreciated? thank you.
  my package JSON is:</p>
  <pre><code>{
    &quot;name&quot;: &quot;date-manager-ui&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~11.2.4&quot;,
      &quot;@angular/cdk&quot;: &quot;^11.2.3&quot;,
      &quot;@angular/common&quot;: &quot;~11.2.4&quot;,
      &quot;@angular/compiler&quot;: &quot;~11.2.4&quot;,
      &quot;@angular/core&quot;: &quot;~11.2.4&quot;,
      &quot;@angular/forms&quot;: &quot;~11.2.4&quot;,
      &quot;@angular/material&quot;: &quot;^11.2.3&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~11.2.4&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~11.2.4&quot;,
      &quot;@angular/router&quot;: &quot;~11.2.4&quot;,
      &quot;angular2-text-mask&quot;: &quot;^9.0.0&quot;,
      &quot;bootstrap&quot;: &quot;^4.6.0&quot;,
      &quot;rxjs&quot;: &quot;~6.6.0&quot;,
      &quot;tslib&quot;: &quot;^2.0.0&quot;,
      &quot;zone.js&quot;: &quot;~0.11.3&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~0.1102.3&quot;,
      &quot;@angular/cli&quot;: &quot;~11.2.3&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~11.2.4&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;codelyzer&quot;: &quot;^6.0.0&quot;,
      &quot;jasmine-core&quot;: &quot;~3.6.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~5.0.0&quot;,
      &quot;karma&quot;: &quot;~6.1.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage&quot;: &quot;~2.0.3&quot;,
      &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
      &quot;protractor&quot;: &quot;~7.0.0&quot;,
      &quot;ts-node&quot;: &quot;~8.3.0&quot;,
      &quot;tslint&quot;: &quot;~6.1.0&quot;,
      &quot;typescript&quot;: &quot;~4.1.5&quot;
    }
  }
  </code></pre>
  <p>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?</p>
  <pre><code>export class AppComponent {
    title = 'AppTest';
  
    ngOnInit(): void {
      alert();
    }
  }
  </code></pre>