fix(@angular-devkit/build-angular): ensure live-reload shim workaround isolation

This change reduces the workaround to a single file location as well as ensuring that only the shims of interest from the two necessary live reload files are affected.  This makes sure that build and serve behavior is the same in this regard.

Author: clydin

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -523,14 +523,6 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
           parser: { system: true },
         },
-        {
-          test: /[\/\\]hot[\/\\]emitter\.js$/,
-          parser: { node: { events: true } },
-        },
-        {
-          test: /[\/\\]webpack-dev-server[\/\\]client[\/\\]utils[\/\\]createSocketUrl\.js$/,
-          parser: { node: { querystring: true } },
-        },
         {
           test: /\.js$/,
           // Factory files are processed by BO in the rules added in typescript.ts.

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -551,19 +551,39 @@ function _addLiveReload(
     webpackConfig.plugins = [];
   }
 
-  // Enable the internal node plugins but no individual shims
-  // This is needed to allow module specific rules to include node shims
+  // Workaround node shim hoisting issues with live reload client
   // Only needed in dev server mode to support live reload capabilities in all package managers
-  if (webpackConfig.node === false) {
-    webpackConfig.node = {
-      global: false,
-      process: false,
-      __filename: false,
-      __dirname: false,
-      Buffer: false,
-      setImmediate: false,
-    };
+  const webpackPath = path.dirname(require.resolve('webpack/package.json'));
+  const nodeLibsBrowserPath = require.resolve('node-libs-browser', { paths: [webpackPath] });
+  const nodeLibsBrowser = require(nodeLibsBrowserPath);
+  webpackConfig.plugins.push(
+    new webpack.NormalModuleReplacementPlugin(
+      /^events|url|querystring$/,
+      (resource: { issuer?: string; request: string }) => {
+        if (!resource.issuer) {
+          return;
+        }
+        if (/[\/\\]hot[\/\\]emitter\.js$/.test(resource.issuer)) {
+          if (resource.request === 'events') {
+            resource.request = nodeLibsBrowser.events;
+          }
+        } else if (
+          /[\/\\]webpack-dev-server[\/\\]client[\/\\]utils[\/\\]createSocketUrl\.js$/.test(
+            resource.issuer,
+          )
+        ) {
+          switch (resource.request) {
+            case 'url':
+              resource.request = nodeLibsBrowser.url;
+              break;
+            case 'querystring':
+              resource.request = nodeLibsBrowser.querystring;
+              break;
+          }
   }
+      },
+    ),
+  );
 
   // This allows for live reload of page when changes are made to repo.
   // https://webpack.js.org/configuration/dev-server/#devserver-inline

tests/legacy-cli/e2e/tests/commands/serve/reload-shims.ts

@@ -0,0 +1,25 @@
+import { prependToFile, writeFile } from '../../../utils/fs';
+import { execAndWaitForOutputToMatch, killAllProcesses } from '../../../utils/process';
+
+export default async function() {
+  // Simulate a JS library using a Node.js specific module
+  await writeFile('src/node-usage.js', `const path = require('path');\n`);
+  await prependToFile('src/main.ts', `import './node-usage';\n`);
+
+  try {
+    // Make sure serve is consistent with build
+    await execAndWaitForOutputToMatch(
+      'ng',
+      ['build'],
+      /Module not found: Error: Can't resolve 'path'/,
+    );
+    // The Node.js specific module should not be found
+    await execAndWaitForOutputToMatch(
+      'ng',
+      ['serve', '--port=0'],
+      /Module not found: Error: Can't resolve 'path'/,
+    );
+  } finally {
+    killAllProcesses();
+  }
+}