@angular-devkit/build-angular 14.2.0-next.0 → 14.2.0-next.1

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.2.0-next.0",
+  "version": "14.2.0-next.1",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.0",
-    "@angular-devkit/architect": "0.1402.0-next.0",
-    "@angular-devkit/build-webpack": "0.1402.0-next.0",
-    "@angular-devkit/core": "14.2.0-next.0",
+    "@angular-devkit/architect": "0.1402.0-next.1",
+    "@angular-devkit/build-webpack": "0.1402.0-next.1",
+    "@angular-devkit/core": "14.2.0-next.1",
     "@babel/core": "7.18.10",
-    "@babel/generator": "7.18.10",
+    "@babel/generator": "7.18.12",
     "@babel/helper-annotate-as-pure": "7.18.6",
     "@babel/plugin-proposal-async-generator-functions": "7.18.10",
     "@babel/plugin-transform-async-to-generator": "7.18.6",
@@ -20,7 +20,7 @@
     "@babel/runtime": "7.18.9",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "14.2.0-next.0",
+    "@ngtools/webpack": "14.2.0-next.1",
     "ansi-colors": "4.1.3",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
@@ -29,7 +29,7 @@
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.14.53",
+    "esbuild-wasm": "0.15.1",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -45,14 +45,14 @@
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "postcss-import": "14.1.0",
     "postcss-loader": "7.0.1",
     "postcss-preset-env": "7.7.2",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.54.1",
+    "sass": "1.54.4",
     "sass-loader": "13.0.2",
     "semver": "7.3.7",
     "source-map-loader": "4.0.0",
@@ -65,12 +65,12 @@
     "tslib": "2.4.0",
     "webpack": "5.74.0",
     "webpack-dev-middleware": "5.3.3",
-    "webpack-dev-server": "4.9.3",
+    "webpack-dev-server": "4.10.0",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.14.53"
+    "esbuild": "0.15.1"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",

package/src/builders/browser-esbuild/compiler-plugin.js

@@ -162,9 +162,13 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             }
             // The file emitter created during `onStart` that will be used during the build in `onLoad` callbacks for TS files
             let fileEmitter;
+            // The stylesheet resources from component stylesheets that will be added to the build results output files
+            let stylesheetResourceFiles;
             build.onStart(async () => {
                 var _a, _b;
                 const result = {};
+                // Reset stylesheet resource output files
+                stylesheetResourceFiles = [];
                 // Create TypeScript compiler host
                 const host = typescript_1.default.createIncrementalCompilerHost(compilerOptions);
                 // Temporarily process external resources via readResource.
@@ -176,9 +180,10 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     if (fileName.endsWith('.html')) {
                         return (_a = this.readFile(fileName)) !== null && _a !== void 0 ? _a : '';
                     }
-                    const { contents, errors, warnings } = await (0, stylesheets_1.bundleStylesheetFile)(fileName, styleOptions);
+                    const { contents, resourceFiles, errors, warnings } = await (0, stylesheets_1.bundleStylesheetFile)(fileName, styleOptions);
                     ((_b = result.errors) !== null && _b !== void 0 ? _b : (result.errors = [])).push(...errors);
                     ((_c = result.warnings) !== null && _c !== void 0 ? _c : (result.warnings = [])).push(...warnings);
+                    stylesheetResourceFiles.push(...resourceFiles);
                     return contents;
                 };
                 // Add an AOT compiler resource transform hook
@@ -191,12 +196,13 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     // The file with the resource content will either be an actual file (resourceFile)
                     // or the file containing the inline component style text (containingFile).
                     const file = (_a = context.resourceFile) !== null && _a !== void 0 ? _a : context.containingFile;
-                    const { contents, errors, warnings } = await (0, stylesheets_1.bundleStylesheetText)(data, {
+                    const { contents, resourceFiles, errors, warnings } = await (0, stylesheets_1.bundleStylesheetText)(data, {
                         resolvePath: path.dirname(file),
                         virtualName: file,
                     }, styleOptions);
                     ((_b = result.errors) !== null && _b !== void 0 ? _b : (result.errors = [])).push(...errors);
                     ((_c = result.warnings) !== null && _c !== void 0 ? _c : (result.warnings = [])).push(...warnings);
+                    stylesheetResourceFiles.push(...resourceFiles);
                     return { content: contents };
                 };
                 // Create the Angular specific program that contains the Angular compiler
@@ -263,9 +269,20 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         ],
                     };
                 }
+                const data = (_a = typescriptResult.content) !== null && _a !== void 0 ? _a : '';
+                const forceAsyncTransformation = /for\s+await\s*\(|async\s+function\s*\*/.test(data);
                 const useInputSourcemap = pluginOptions.sourcemap &&
                     (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
-                const data = (_a = typescriptResult.content) !== null && _a !== void 0 ? _a : '';
+                // If no additional transformations are needed, return the TypeScript output directly
+                if (!forceAsyncTransformation && !pluginOptions.advancedOptimizations) {
+                    return {
+                        // Strip sourcemaps if they should not be used
+                        contents: useInputSourcemap
+                            ? data
+                            : data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''),
+                        loader: 'js',
+                    };
+                }
                 const babelResult = await (0, core_1.transformAsync)(data, {
                     filename: args.path,
                     inputSourceMap: (useInputSourcemap ? undefined : false),
@@ -279,7 +296,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         [
                             application_1.default,
                             {
-                                forceAsyncTransformation: data.includes('async'),
+                                forceAsyncTransformation,
                                 optimize: pluginOptions.advancedOptimizations && {},
                             },
                         ],
@@ -292,11 +309,24 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             });
             build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
                 var _a;
-                const angularPackage = /[\\/]node_modules[\\/]@angular[\\/]/.test(args.path);
-                const linkerPluginCreator = (await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel')).createEs2015LinkerPlugin;
+                const data = await fs_1.promises.readFile(args.path, 'utf-8');
+                const forceAsyncTransformation = !/[\\/][_f]?esm2015[\\/]/.test(args.path) &&
+                    /for\s+await\s*\(|async\s+function\s*\*/.test(data);
+                const shouldLink = await (0, webpack_loader_1.requiresLinking)(args.path, data);
                 const useInputSourcemap = pluginOptions.sourcemap &&
                     (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
-                const data = await fs_1.promises.readFile(args.path, 'utf-8');
+                // If no additional transformations are needed, return the TypeScript output directly
+                if (!forceAsyncTransformation && !pluginOptions.advancedOptimizations && !shouldLink) {
+                    return {
+                        // Strip sourcemaps if they should not be used
+                        contents: useInputSourcemap
+                            ? data
+                            : data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''),
+                        loader: 'js',
+                    };
+                }
+                const angularPackage = /[\\/]node_modules[\\/]@angular[\\/]/.test(args.path);
+                const linkerPluginCreator = (await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel')).createEs2015LinkerPlugin;
                 const result = await (0, core_1.transformAsync)(data, {
                     filename: args.path,
                     inputSourceMap: (useInputSourcemap ? undefined : false),
@@ -311,11 +341,11 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                             application_1.default,
                             {
                                 angularLinker: {
-                                    shouldLink: await (0, webpack_loader_1.requiresLinking)(args.path, data),
+                                    shouldLink,
                                     jitMode: false,
                                     linkerPluginCreator,
                                 },
-                                forceAsyncTransformation: !/[\\/][_f]?esm2015[\\/]/.test(args.path) && data.includes('async'),
+                                forceAsyncTransformation,
                                 optimize: pluginOptions.advancedOptimizations && {
                                     looseEnums: angularPackage,
                                     pureTopLevel: angularPackage,
@@ -329,6 +359,12 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     loader: 'js',
                 };
             });
+            build.onEnd((result) => {
+                var _a;
+                if (stylesheetResourceFiles.length) {
+                    (_a = result.outputFiles) === null || _a === void 0 ? void 0 : _a.push(...stylesheetResourceFiles);
+                }
+            });
         },
     };
 }

package/src/builders/browser-esbuild/css-resource-plugin.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import type { Plugin } from 'esbuild';
+/**
+ * Creates an esbuild {@link Plugin} that loads all CSS url token references using the
+ * built-in esbuild `file` loader. A plugin is used to allow for all file extensions
+ * and types to be supported without needing to manually specify all extensions
+ * within the build configuration.
+ *
+ * @returns An esbuild {@link Plugin} instance.
+ */
+export declare function createCssResourcePlugin(): Plugin;

package/src/builders/browser-esbuild/css-resource-plugin.js

@@ -0,0 +1,59 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCssResourcePlugin = void 0;
+const promises_1 = require("fs/promises");
+/**
+ * Symbol marker used to indicate CSS resource resolution is being attempted.
+ * This is used to prevent an infinite loop within the plugin's resolve hook.
+ */
+const CSS_RESOURCE_RESOLUTION = Symbol('CSS_RESOURCE_RESOLUTION');
+/**
+ * Creates an esbuild {@link Plugin} that loads all CSS url token references using the
+ * built-in esbuild `file` loader. A plugin is used to allow for all file extensions
+ * and types to be supported without needing to manually specify all extensions
+ * within the build configuration.
+ *
+ * @returns An esbuild {@link Plugin} instance.
+ */
+function createCssResourcePlugin() {
+    return {
+        name: 'angular-css-resource',
+        setup(build) {
+            build.onResolve({ filter: /.*/ }, async (args) => {
+                var _a;
+                // Only attempt to resolve url tokens which only exist inside CSS.
+                // Also, skip this plugin if already attempting to resolve the url-token.
+                if (args.kind !== 'url-token' || ((_a = args.pluginData) === null || _a === void 0 ? void 0 : _a[CSS_RESOURCE_RESOLUTION])) {
+                    return null;
+                }
+                const { importer, kind, resolveDir, namespace, pluginData = {} } = args;
+                pluginData[CSS_RESOURCE_RESOLUTION] = true;
+                const result = await build.resolve(args.path, {
+                    importer,
+                    kind,
+                    namespace,
+                    pluginData,
+                    resolveDir,
+                });
+                return {
+                    ...result,
+                    namespace: 'css-resource',
+                };
+            });
+            build.onLoad({ filter: /.*/, namespace: 'css-resource' }, async (args) => {
+                return {
+                    contents: await (0, promises_1.readFile)(args.path),
+                    loader: 'file',
+                };
+            });
+        },
+    };
+}
+exports.createCssResourcePlugin = createCssResourcePlugin;

package/src/builders/browser-esbuild/index.js

@@ -140,6 +140,7 @@ async function buildEsbuildBrowser(options, context) {
                 outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames,
                 includePaths: (_e = options.stylePreprocessorOptions) === null || _e === void 0 ? void 0 : _e.includePaths,
                 preserveSymlinks: options.preserveSymlinks,
+                externalDependencies: options.externalDependencies,
             });
             await (0, esbuild_1.logMessages)(context, sheetResult);
             if (!sheetResult.path) {
@@ -244,6 +245,18 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
         entryNames: outputNames.bundles,
         assetNames: outputNames.media,
         target: 'es2020',
+        supported: {
+            // Native async/await is not supported with Zone.js. Disabling support here will cause
+            // esbuild to downlevel async/await to a Zone.js supported form.
+            'async-await': false,
+            // Zone.js also does not support async generators or async iterators. However, esbuild does
+            // not currently support downleveling either of them. Instead babel is used within the JS/TS
+            // loader to perform the downlevel transformation. They are both disabled here to allow
+            // esbuild to handle them in the future if support is ever added.
+            // NOTE: If esbuild adds support in the future, the babel support for these can be disabled.
+            'async-generator': false,
+            'for-await': false,
+        },
         mainFields: ['es2020', 'browser', 'module', 'main'],
         conditions: ['es2020', 'es2015', 'module'],
         resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
@@ -279,6 +292,7 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
                 !!sourcemapOptions.styles && (sourcemapOptions.hidden ? false : 'inline'),
                 outputNames,
                 includePaths: (_a = options.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths,
+                externalDependencies: options.externalDependencies,
             }),
         ],
         define: {

package/src/builders/browser-esbuild/sass-plugin.d.ts

@@ -8,5 +8,5 @@
 import type { Plugin } from 'esbuild';
 export declare function createSassPlugin(options: {
     sourcemap: boolean;
-    includePaths?: string[];
+    loadPaths?: string[];
 }): Plugin;

package/src/builders/browser-esbuild/sass-plugin.js

@@ -6,47 +6,90 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSassPlugin = void 0;
-const sass_service_1 = require("../../sass/sass-service");
+const url_1 = require("url");
 function createSassPlugin(options) {
     return {
         name: 'angular-sass',
         setup(build) {
             let sass;
-            build.onStart(() => {
-                sass = new sass_service_1.SassWorkerImplementation();
+            build.onStart(async () => {
+                // Lazily load Sass
+                sass = await Promise.resolve().then(() => __importStar(require('sass')));
             });
-            build.onEnd(() => {
-                sass === null || sass === void 0 ? void 0 : sass.close();
-            });
-            build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
-                const result = await new Promise((resolve, reject) => {
-                    sass.render({
-                        file: args.path,
-                        includePaths: options.includePaths,
-                        indentedSyntax: args.path.endsWith('.sass'),
-                        outputStyle: 'expanded',
+            build.onLoad({ filter: /\.s[ac]ss$/ }, (args) => {
+                try {
+                    const warnings = [];
+                    // Use sync version as async version is slower.
+                    const { css, sourceMap, loadedUrls } = sass.compile(args.path, {
+                        style: 'expanded',
+                        loadPaths: options.loadPaths,
                         sourceMap: options.sourcemap,
-                        sourceMapContents: options.sourcemap,
-                        sourceMapEmbed: options.sourcemap,
+                        sourceMapIncludeSources: options.sourcemap,
                         quietDeps: true,
-                    }, (error, result) => {
-                        if (error) {
-                            reject(error);
-                        }
-                        if (result) {
-                            resolve(result);
-                        }
+                        logger: {
+                            warn: (text, _options) => {
+                                warnings.push({
+                                    text,
+                                });
+                            },
+                        },
                     });
-                });
-                return {
-                    contents: result.css,
-                    loader: 'css',
-                    watchFiles: result.stats.includedFiles,
-                };
+                    return {
+                        loader: 'css',
+                        contents: `${css}\n${sourceMapToUrlComment(sourceMap)}`,
+                        watchFiles: loadedUrls.map((url) => (0, url_1.fileURLToPath)(url)),
+                        warnings,
+                    };
+                }
+                catch (error) {
+                    if (error instanceof sass.Exception) {
+                        const file = error.span.url ? (0, url_1.fileURLToPath)(error.span.url) : undefined;
+                        return {
+                            loader: 'css',
+                            errors: [
+                                {
+                                    text: error.toString(),
+                                },
+                            ],
+                            watchFiles: file ? [file] : undefined,
+                        };
+                    }
+                    throw error;
+                }
             });
         },
     };
 }
 exports.createSassPlugin = createSassPlugin;
+function sourceMapToUrlComment(sourceMap) {
+    if (!sourceMap) {
+        return '';
+    }
+    const urlSourceMap = Buffer.from(JSON.stringify(sourceMap), 'utf-8').toString('base64');
+    return `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${urlSourceMap} */`;
+}

package/src/builders/browser-esbuild/stylesheets.d.ts

@@ -16,6 +16,7 @@ export interface BundleStylesheetOptions {
         media?: string;
     };
     includePaths?: string[];
+    externalDependencies?: string[];
 }
 /**
  * Bundle a stylesheet that exists as a file on the filesystem.

package/src/builders/browser-esbuild/stylesheets.js

@@ -32,17 +32,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bundleStylesheetText = exports.bundleStylesheetFile = void 0;
 const path = __importStar(require("path"));
+const css_resource_plugin_1 = require("./css-resource-plugin");
 const esbuild_1 = require("./esbuild");
 const sass_plugin_1 = require("./sass-plugin");
 async function bundleStylesheet(entry, options) {
-    var _a, _b;
+    var _a, _b, _c;
+    const loadPaths = (_a = options.includePaths) !== null && _a !== void 0 ? _a : [];
+    // Needed to resolve node packages.
+    loadPaths.push(path.join(options.workspaceRoot, 'node_modules'));
     // Execute esbuild
     const result = await (0, esbuild_1.bundle)({
         ...entry,
         absWorkingDir: options.workspaceRoot,
         bundle: true,
-        entryNames: (_a = options.outputNames) === null || _a === void 0 ? void 0 : _a.bundles,
-        assetNames: (_b = options.outputNames) === null || _b === void 0 ? void 0 : _b.media,
+        entryNames: (_b = options.outputNames) === null || _b === void 0 ? void 0 : _b.bundles,
+        assetNames: (_c = options.outputNames) === null || _c === void 0 ? void 0 : _c.media,
         logLevel: 'silent',
         minify: options.optimization,
         sourcemap: options.sourcemap,
@@ -50,10 +54,12 @@ async function bundleStylesheet(entry, options) {
         write: false,
         platform: 'browser',
         preserveSymlinks: options.preserveSymlinks,
+        external: options.externalDependencies,
         conditions: ['style', 'sass'],
         mainFields: ['style', 'sass'],
         plugins: [
-            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, includePaths: options.includePaths }),
+            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, loadPaths }),
+            (0, css_resource_plugin_1.createCssResourcePlugin)(),
         ],
     });
     // Extract the result of the bundling from the output files

package/src/builders/dev-server/index.js

@@ -51,6 +51,7 @@ const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const configs_1 = require("../../webpack/configs");
 const index_html_webpack_plugin_1 = require("../../webpack/plugins/index-html-webpack-plugin");
+const service_worker_plugin_1 = require("../../webpack/plugins/service-worker-plugin");
 const stats_1 = require("../../webpack/utils/stats");
 const schema_1 = require("../browser/schema");
 /**
@@ -160,6 +161,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         if (transforms.webpackConfiguration) {
             webpackConfig = await transforms.webpackConfiguration(webpackConfig);
         }
+        (_c = webpackConfig.plugins) !== null && _c !== void 0 ? _c : (webpackConfig.plugins = []);
         if (browserOptions.index) {
             const { scripts = [], styles = [], baseHref } = browserOptions;
             const entrypoints = (0, package_chunk_sort_1.generateEntryPoints)({
@@ -168,9 +170,8 @@ function serveWebpackBrowser(options, context, transforms = {}) {
                 // The below is needed as otherwise HMR for CSS will break.
                 // styles.js and runtime.js needs to be loaded as a non-module scripts as otherwise `document.currentScript` will be null.
                 // https://github.com/webpack-contrib/mini-css-extract-plugin/blob/90445dd1d81da0c10b9b0e8a17b417d0651816b8/src/hmr/hotModuleReplacement.js#L39
-                isHMREnabled: !!((_c = webpackConfig.devServer) === null || _c === void 0 ? void 0 : _c.hot),
+                isHMREnabled: !!((_d = webpackConfig.devServer) === null || _d === void 0 ? void 0 : _d.hot),
             });
-            (_d = webpackConfig.plugins) !== null && _d !== void 0 ? _d : (webpackConfig.plugins = []);
             webpackConfig.plugins.push(new index_html_webpack_plugin_1.IndexHtmlWebpackPlugin({
                 indexPath: path.resolve(workspaceRoot, (0, webpack_browser_config_1.getIndexInputFile)(browserOptions.index)),
                 outputPath: (0, webpack_browser_config_1.getIndexOutputFile)(browserOptions.index),
@@ -185,6 +186,15 @@ function serveWebpackBrowser(options, context, transforms = {}) {
                 lang: locale,
             }));
         }
+        if (browserOptions.serviceWorker) {
+            webpackConfig.plugins.push(new service_worker_plugin_1.ServiceWorkerPlugin({
+                baseHref: browserOptions.baseHref,
+                root: context.workspaceRoot,
+                projectRoot,
+                outputPath: path.join(context.workspaceRoot, browserOptions.outputPath),
+                ngswConfigPath: browserOptions.ngswConfigPath,
+            }));
+        }
         return {
             browserOptions,
             webpackConfig,

package/src/utils/service-worker.d.ts

@@ -5,4 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-export declare function augmentAppWithServiceWorker(appRoot: string, workspaceRoot: string, outputPath: string, baseHref: string, ngswConfigPath?: string): Promise<void>;
+/// <reference types="node" />
+import { promises as fsPromises } from 'fs';
+export declare function augmentAppWithServiceWorker(appRoot: string, workspaceRoot: string, outputPath: string, baseHref: string, ngswConfigPath?: string, inputputFileSystem?: typeof fsPromises, outputFileSystem?: typeof fsPromises): Promise<void>;

package/src/utils/service-worker.js

@@ -34,40 +34,42 @@ exports.augmentAppWithServiceWorker = void 0;
 const crypto = __importStar(require("crypto"));
 const fs_1 = require("fs");
 const path = __importStar(require("path"));
-const stream_1 = require("stream");
 const error_1 = require("./error");
 const load_esm_1 = require("./load-esm");
 class CliFilesystem {
-    constructor(base) {
+    constructor(fs, base) {
+        this.fs = fs;
         this.base = base;
     }
     list(dir) {
         return this._recursiveList(this._resolve(dir), []);
     }
     read(file) {
-        return fs_1.promises.readFile(this._resolve(file), 'utf-8');
+        return this.fs.readFile(this._resolve(file), 'utf-8');
     }
-    hash(file) {
-        return new Promise((resolve, reject) => {
-            const hash = crypto.createHash('sha1').setEncoding('hex');
-            (0, stream_1.pipeline)((0, fs_1.createReadStream)(this._resolve(file)), hash, (error) => error ? reject(error) : resolve(hash.read()));
-        });
+    async hash(file) {
+        return crypto
+            .createHash('sha1')
+            .update(await this.fs.readFile(this._resolve(file)))
+            .digest('hex');
     }
-    write(file, content) {
-        return fs_1.promises.writeFile(this._resolve(file), content);
+    write(_file, _content) {
+        throw new Error('This should never happen.');
     }
     _resolve(file) {
         return path.join(this.base, file);
     }
     async _recursiveList(dir, items) {
         const subdirectories = [];
-        for await (const entry of await fs_1.promises.opendir(dir)) {
-            if (entry.isFile()) {
+        for (const entry of await this.fs.readdir(dir)) {
+            const entryPath = path.join(dir, entry);
+            const stats = await this.fs.stat(entryPath);
+            if (stats.isFile()) {
                 // Uses posix paths since the service worker expects URLs
-                items.push('/' + path.relative(this.base, path.join(dir, entry.name)).replace(/\\/g, '/'));
+                items.push('/' + path.relative(this.base, entryPath).replace(/\\/g, '/'));
             }
-            else if (entry.isDirectory()) {
-                subdirectories.push(path.join(dir, entry.name));
+            else if (stats.isDirectory()) {
+                subdirectories.push(entryPath);
             }
         }
         for (const subdirectory of subdirectories) {
@@ -76,7 +78,7 @@ class CliFilesystem {
         return items;
     }
 }
-async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, baseHref, ngswConfigPath) {
+async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, baseHref, ngswConfigPath, inputputFileSystem = fs_1.promises, outputFileSystem = fs_1.promises) {
     // Determine the configuration file path
     const configPath = ngswConfigPath
         ? path.join(workspaceRoot, ngswConfigPath)
@@ -84,7 +86,7 @@ async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, b
     // Read the configuration file
     let config;
     try {
-        const configurationData = await fs_1.promises.readFile(configPath, 'utf-8');
+        const configurationData = await inputputFileSystem.readFile(configPath, 'utf-8');
         config = JSON.parse(configurationData);
     }
     catch (error) {
@@ -103,20 +105,28 @@ async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, b
     // changed to a direct dynamic import.
     const GeneratorConstructor = (await (0, load_esm_1.loadEsmModule)('@angular/service-worker/config')).Generator;
     // Generate the manifest
-    const generator = new GeneratorConstructor(new CliFilesystem(outputPath), baseHref);
+    const generator = new GeneratorConstructor(new CliFilesystem(outputFileSystem, outputPath), baseHref);
     const output = await generator.process(config);
     // Write the manifest
     const manifest = JSON.stringify(output, null, 2);
-    await fs_1.promises.writeFile(path.join(outputPath, 'ngsw.json'), manifest);
+    await outputFileSystem.writeFile(path.join(outputPath, 'ngsw.json'), manifest);
     // Find the service worker package
     const workerPath = require.resolve('@angular/service-worker/ngsw-worker.js');
+    const copy = async (src, dest) => {
+        const resolvedDest = path.join(outputPath, dest);
+        return inputputFileSystem === outputFileSystem
+            ? // Native FS (Builder).
+                inputputFileSystem.copyFile(workerPath, resolvedDest, fs_1.constants.COPYFILE_FICLONE)
+            : // memfs (Webpack): Read the file from the input FS (disk) and write it to the output FS (memory).
+                outputFileSystem.writeFile(resolvedDest, await inputputFileSystem.readFile(src));
+    };
     // Write the worker code
-    await fs_1.promises.copyFile(workerPath, path.join(outputPath, 'ngsw-worker.js'), fs_1.constants.COPYFILE_FICLONE);
+    await copy(workerPath, 'ngsw-worker.js');
     // If present, write the safety worker code
-    const safetyPath = path.join(path.dirname(workerPath), 'safety-worker.js');
     try {
-        await fs_1.promises.copyFile(safetyPath, path.join(outputPath, 'worker-basic.min.js'), fs_1.constants.COPYFILE_FICLONE);
-        await fs_1.promises.copyFile(safetyPath, path.join(outputPath, 'safety-worker.js'), fs_1.constants.COPYFILE_FICLONE);
+        const safetyPath = path.join(path.dirname(workerPath), 'safety-worker.js');
+        await copy(safetyPath, 'worker-basic.min.js');
+        await copy(safetyPath, 'safety-worker.js');
     }
     catch (error) {
         (0, error_1.assertIsError)(error);

package/src/webpack/configs/dev-server.js

@@ -98,23 +98,6 @@ async function getDevServerConfig(wco) {
                 publicPath: servePath,
                 stats: false,
             },
-            setupMiddlewares: (middlewares, _devServer) => {
-                // Temporary workaround for https://github.com/webpack/webpack-dev-server/issues/4180
-                middlewares.push({
-                    name: 'options-request-response',
-                    path: '*',
-                    middleware: (req, res, next) => {
-                        if (req.method === 'OPTIONS') {
-                            res.statusCode = 204;
-                            res.setHeader('Content-Length', 0);
-                            res.end();
-                            return;
-                        }
-                        next();
-                    },
-                });
-                return middlewares;
-            },
             liveReload,
             hot: hmr && !liveReload ? 'only' : hmr,
             proxy: await addProxyConfig(root, proxyConfig),

package/src/webpack/plugins/analytics.js

@@ -157,7 +157,7 @@ class NgBuildAnalyticsPlugin {
         var _a, _b;
         const chunkAssets = new Set();
         for (const chunk of compilation.chunks) {
-            if (!chunk.rendered) {
+            if (!chunk.rendered || chunk.files.size === 0) {
                 continue;
             }
             const firstFile = Array.from(chunk.files)[0];

package/src/webpack/plugins/postcss-cli-resources.js

@@ -131,7 +131,7 @@ function default_1(options) {
                 return;
             }
             const value = decl.value;
-            const urlRegex = /url\(\s*(?:"([^"]+)"|'([^']+)'|(.+?))\s*\)/g;
+            const urlRegex = /url(?:\(\s*['"]?)(.*?)(?:['"]?\s*\))/g;
             const segments = [];
             let match;
             let lastIndex = 0;
@@ -141,7 +141,7 @@ function default_1(options) {
             const context = (inputFile && path.dirname(inputFile)) || loader.context;
             // eslint-disable-next-line no-cond-assign
             while ((match = urlRegex.exec(value))) {
-                const originalUrl = match[1] || match[2] || match[3];
+                const originalUrl = match[1];
                 let processedUrl;
                 try {
                     processedUrl = await process(originalUrl, context, resourceCache);

package/src/webpack/plugins/service-worker-plugin.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import type { Compiler } from 'webpack';
+export interface ServiceWorkerPluginOptions {
+    projectRoot: string;
+    root: string;
+    outputPath: string;
+    baseHref?: string;
+    ngswConfigPath?: string;
+}
+export declare class ServiceWorkerPlugin {
+    private readonly options;
+    constructor(options: ServiceWorkerPluginOptions);
+    apply(compiler: Compiler): void;
+}

package/src/webpack/plugins/service-worker-plugin.js

@@ -0,0 +1,27 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServiceWorkerPlugin = void 0;
+const service_worker_1 = require("../../utils/service-worker");
+class ServiceWorkerPlugin {
+    constructor(options) {
+        this.options = options;
+    }
+    apply(compiler) {
+        compiler.hooks.done.tapPromise('angular-service-worker', async (_compilation) => {
+            const { projectRoot, root, baseHref = '', ngswConfigPath, outputPath } = this.options;
+            await (0, service_worker_1.augmentAppWithServiceWorker)(projectRoot, root, outputPath, baseHref, ngswConfigPath, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            compiler.inputFileSystem.promises, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            compiler.outputFileSystem.promises);
+        });
+    }
+}
+exports.ServiceWorkerPlugin = ServiceWorkerPlugin;