title: Angular 12.0.5 HMR is not working, not reloading modules, not reloading page (live reload), Angular 11.0.6 reloads full page
body: <p><strong>Angular HMR not replacing/reloading components</strong></p>
  <ul>
  <li>Live Reload works for 11.0.6 and 12.1.0-next.6.</li>
  <li>Angular 12.0.5 does not reload at all.</li>
  </ul>
  <blockquote>
  <p><strong>Anyone out there who got this working and can provide a working sample app?</strong></p>
  </blockquote>
  <h1>Given : A simple starter app</h1>
  <p>(from storybook <a href="https://github.com/chromaui/intro-storybook-angular-template" rel="nofollow noreferrer">https://github.com/chromaui/intro-storybook-angular-template</a>)</p>
  <h2>with Angular 11.0.6</h2>
  <p>Then HMR does not work as expected out of the box, but full reload does (i.e [WDS] Live Reloading enabled.)</p>
  <h2>When updating to Angular 12.0.5</h2>
  <p>Then HMR doesn't reload anything. (no Live reload at all)</p>
  <blockquote>
  <p>12.0.5 Behavior:  no reload when updating angular components.</p>
  </blockquote>
  <p>Error in console (chrome):</p>
  <pre><code>dev-server.js:60 Uncaught Error: [HMR] Hot Module Replacement is disabled.
      at Object.5033 (dev-server.js:60)
      at __webpack_require__ (bootstrap:19)
      at __webpack_exec__ (polyfills.js:12907)
      at polyfills.js:12908
      at webpackJsonpCallback (jsonp chunk loading:35)
      at polyfills.js:1
  
  </code></pre>
  <blockquote>
  <p>After editing a component (HTML) the console is &quot;Stuck on&quot;  &quot;[WDS] App hot update…&quot;</p>
  </blockquote>
  <h2>When updating to Angular 12.1.0-next.6&quot;</h2>
  <p>Same result as for v11 (Then HMR does not work as expected out of the box, but full reload does (i.e [WDS] Live Reloading enabled.)</p>
  <h1>webpack-dev-server is the cause (perhaps together with webpack 5.3)</h1>
  <h2>After some digging I realized this has to do with webpack-dev-server.</h2>
  <ul>
  <li><a href="https://github.com/webpack/webpack-dev-server/issues/2758" rel="nofollow noreferrer">https://github.com/webpack/webpack-dev-server/issues/2758</a></li>
  </ul>
  <blockquote>
  <p>and a solution seem to be to set the webpack target to web (instead of browser) for development. or to use a beta version of webpack-dev-server (i.e 4.0.0-beta.x)</p>
  </blockquote>
  <pre><code>&quot;target: 'web',
  </code></pre>
  <h3>Investigating the versions used by Angular build system</h3>
  <p>in  &quot;node_modules/@angular-devkit/build-webpack/package.json&quot; the webpack-dev-server is used.</p>
  <p>For &quot;@angular-devkit/build-angular&quot;: &quot;~12.0.5&quot;, webpack-dev-server version is 3.11.2</p>
  <blockquote>
  <p>&quot;peerDependencies&quot;: {
  &quot;webpack&quot;: &quot;^5.30.0&quot;,
  &quot;webpack-dev-server&quot;: &quot;^3.11.2&quot;
  },</p>
  </blockquote>
  <p><em>when updating Angular to v-next</em>
  For &quot;@angular-devkit/build-angular&quot;: &quot;^12.1.0-next.6&quot;,webpack-dev-server version is lower , 3.1.4, the same as in 'build-angular' v11. (probably because they realized the issue with live reloading)</p>
  <blockquote>
  <p>&quot;peerDependencies&quot;: {
  &quot;webpack&quot;: &quot;^5.30.0&quot;,
  &quot;webpack-dev-server&quot;: &quot;^3.1.4&quot;
  },</p>
  </blockquote>
  <p><em>when using Angular 11</em>
  For &quot;@angular-devkit/build-angular&quot;: &quot;~0.1100.6&quot;</p>
  <blockquote>
  <p>&quot;peerDependencies&quot;: {
  &quot;webpack&quot;: &quot;^4.6.0&quot;,
  &quot;webpack-dev-server&quot;: &quot;^3.1.4&quot;
  },</p>
  </blockquote>
  <h3>Configuring webpack (when using Angular 12.0.5 / next.6) - didn't help</h3>
  <p>Configuring according to the following resource, using @angular-builders/custom-webpack</p>
  <blockquote>
  <p>did't help. HELP! =D</p>
  </blockquote>
  <ul>
  <li><a href="https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack#Custom-webpack-dev-server" rel="nofollow noreferrer">https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack#Custom-webpack-dev-server</a></li>
  <li><a href="https://github.com/just-jeb/angular-builders/blob/master/packages/custom-webpack/examples/full-cycle-app/extra-webpack.config.ts" rel="nofollow noreferrer">https://github.com/just-jeb/angular-builders/blob/master/packages/custom-webpack/examples/full-cycle-app/extra-webpack.config.ts</a></li>
  </ul>
  <pre class="lang-json prettyprint-override"><code>//package.json
  &quot;devDependencies&quot;: {
      &quot;@angular-builders/custom-webpack&quot;: &quot;^12.1.0&quot;,
  </code></pre>
  <pre class="lang-json prettyprint-override"><code>//angular.json
  //replace &quot;builder&quot; in &quot;build&quot; and &quot;serve&quot;
  //add customWebpackConfig with path to a new config file
  //&quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;
      &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-builders/custom-webpack:browser&quot;,
            &quot;options&quot;: {
              &quot;customWebpackConfig&quot;: {
                &quot;path&quot;: &quot;extra-webpack.config.ts&quot;,
                &quot;replaceDuplicatePlugins&quot;: true
             },
           //...
           //replace   &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
           &quot;serve&quot;: {
             &quot;builder&quot;: &quot;@angular-builders/custom-webpack:dev-server&quot;,
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>//extra-webpack.config.ts
  import { Configuration } from &quot;webpack&quot;;
  
  export default {
      target:&quot;web&quot;,
      // target: process.env.NODE_ENV === &quot;development&quot; ? &quot;web&quot; : &quot;browserslist&quot;,  
  } as Configuration;
  </code></pre>