From 150d2b66cacc7a04ddaecfc18679486f82822c15 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Thu, 11 Jul 2019 12:12:17 -0400 Subject: [PATCH] fix(@angular-devkit/build-angular): support pnpm with ng serve Webpack and its development server assume the presence of two node builtins (`events` & `querystring`). Do to package hoisting npm/yarn will usually place the shims for those two builtins at locations that webpack find them. This is however not guaranteed nor will it work with pnpm which strictly follows the prescribed dependency tree. To remedy this, the specific node shims are enabled only for the specific internal webpack files that are used within the development server. This ensures that the requirements of these files does not pollute the entire application. Fixes #13680 --- .../models/webpack-configs/common.ts | 8 ++++++++ .../build_angular/src/dev-server/index.ts | 14 ++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts index e2677039b0f7..c393254f507a 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts +++ b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts @@ -402,6 +402,14 @@ 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$/, ...buildOptimizerUseRule, diff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts index ec61f44aa73d..cbb7f4297dca 100644 --- a/packages/angular_devkit/build_angular/src/dev-server/index.ts +++ b/packages/angular_devkit/build_angular/src/dev-server/index.ts @@ -407,6 +407,20 @@ 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 + // 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, + }; + } + // This allows for live reload of page when changes are made to repo. // https://webpack.js.org/configuration/dev-server/#devserver-inline let webpackDevServerPath;