fix live reload for webpack 5

Author: ocombe

packages/angular-v12/angular-v12.webpack.ts

@@ -77,8 +77,7 @@ export class AngularV12Webpack extends AngularWebpack {
     delete webpackConfig.devServer.watchOptions;
 
     // Moved sockPath to client.webSocketURL.pathname option
-    webpackConfig.devServer.client.webSocketURL = webpackConfig.devServer.client.webSocketURL || {};
-    webpackConfig.devServer.client.webSocketURL.pathname = webpackConfig.devServer.sockPath;
+    // We let webpack handle that now
     delete webpackConfig.devServer.sockPath;
 
     // Removed stats in favor of the stats options from webpack
@@ -90,6 +89,9 @@ export class AngularV12Webpack extends AngularWebpack {
     // Removed watch to avoid "DEP_WEBPACK_WATCH_WITHOUT_CALLBACK" warning
     delete webpackConfig.watch;
 
+    // Removed in favor of manual setup entries.
+    delete webpackConfig.devServer.injectClient;
+
     // Cleaning up undefined values
     Object.keys(webpackConfig.devServer).forEach((option) => {
       if (typeof webpackConfig.devServer[option] === 'undefined') {
@@ -166,41 +168,6 @@ export class AngularV12Webpack extends AngularWebpack {
       {}
     );
 
-    // @ts-ignore
-    if (webpackOptions.liveReload && !webpackOptions.hmr) {
-      // This is needed because we cannot use the inline option directly in the config
-      // because of the SuppressExtractedTextChunksWebpackPlugin
-      // Consider not using SuppressExtractedTextChunksWebpackPlugin when liveReload is enable.
-      // tslint:disable-next-line: no-any
-      addDevServerEntrypoints(webpackConfig as any, {
-        ...(webpackConfig as any).devServer,
-        inline: true,
-      });
-
-      // Remove live-reload code from all entrypoints but not main.
-      // Otherwise, this will break SuppressExtractedTextChunksWebpackPlugin because
-      // 'addDevServerEntrypoints' adds additional entry-points to all entries.
-      if (
-        webpackConfig.entry &&
-        typeof webpackConfig.entry === 'object' &&
-        !Array.isArray(webpackConfig.entry) &&
-        webpackConfig.entry.main
-      ) {
-        for (const [key, value] of Object.entries(webpackConfig.entry)) {
-          if (key === 'main' || !Array.isArray(value)) {
-            // eslint-disable-next-line no-continue
-            continue;
-          }
-
-          const webpackClientScriptIndex = value.findIndex((x) => x.includes('webpack-dev-server/client/index.js'));
-          if (webpackClientScriptIndex >= 0) {
-            // Remove the webpack-dev-server/client script from array.
-            value.splice(webpackClientScriptIndex, 1);
-          }
-        }
-      }
-    }
-
     // @ts-ignore
     if (webpackOptions.hmr) {
       logger.warn(tags.stripIndents`NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.

packages/angular-v12/webpack/webpack5.serve.config.ts

@@ -90,7 +90,7 @@ export function webpack5ServeConfigFactory(
           serveIndex: true,
           // Can be:
           // watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar)
-          watch: true,
+          watch: false,
         },
       ],
 
@@ -110,12 +110,7 @@ export function webpack5ServeConfigFactory(
       },
 
       client: {
-        overlay: false,
-        // public, sockHost, sockPath, and sockPort options were removed in favor client.webSocketURL option:
-        webSocketURL: {
-          pathname: `_hmr/${devServerID}`,
-          // port automatically matches the website
-        },
+        overlay: false
       },
 
       webSocketServer: {