@angular-devkit/build-angular 14.1.0 → 14.1.3

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.1.0",
+  "version": "14.1.3",
   "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.1401.0",
-    "@angular-devkit/build-webpack": "0.1401.0",
-    "@angular-devkit/core": "14.1.0",
+    "@angular-devkit/architect": "0.1401.3",
+    "@angular-devkit/build-webpack": "0.1401.3",
+    "@angular-devkit/core": "14.1.3",
     "@babel/core": "7.18.6",
     "@babel/generator": "7.18.7",
     "@babel/helper-annotate-as-pure": "7.18.6",
@@ -20,7 +20,7 @@
     "@babel/runtime": "7.18.6",
     "@babel/template": "7.18.6",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "14.1.0",
+    "@ngtools/webpack": "14.1.3",
     "ansi-colors": "4.1.3",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",

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

@@ -124,7 +124,11 @@ async function buildEsbuildBrowser(options, context) {
     // Process global stylesheets
     if (options.styles) {
         // resolveGlobalStyles is temporarily reused from the Webpack builder code
-        const { entryPoints: stylesheetEntrypoints, noInjectNames } = (0, configs_1.resolveGlobalStyles)(options.styles, workspaceRoot, !!options.preserveSymlinks);
+        const { entryPoints: stylesheetEntrypoints, noInjectNames } = (0, configs_1.resolveGlobalStyles)(options.styles, workspaceRoot, 
+        // preserveSymlinks is always true here to allow the bundler to handle the option
+        true, 
+        // skipResolution to leverage the bundler's more comprehensive resolution
+        true);
         for (const [name, files] of Object.entries(stylesheetEntrypoints)) {
             const virtualEntryData = files
                 .map((file) => `@import '${file.replace(/\\/g, '/')}';`)
@@ -135,6 +139,8 @@ async function buildEsbuildBrowser(options, context) {
                 sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
                 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) {
@@ -239,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'],
@@ -274,10 +292,11 @@ 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: {
-            'ngDevMode': optimizationOptions.scripts ? 'false' : 'true',
+            ...(optimizationOptions.scripts ? { 'ngDevMode': 'false' } : undefined),
             'ngJitMode': 'false',
         },
     });

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,6 +32,7 @@ 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) {
@@ -50,10 +51,12 @@ async function bundleStylesheet(entry, options) {
         write: false,
         platform: 'browser',
         preserveSymlinks: options.preserveSymlinks,
-        conditions: ['style'],
-        mainFields: ['style'],
+        external: options.externalDependencies,
+        conditions: ['style', 'sass'],
+        mainFields: ['style', 'sass'],
         plugins: [
             (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, includePaths: options.includePaths }),
+            (0, css_resource_plugin_1.createCssResourcePlugin)(),
         ],
     });
     // Extract the result of the bundling from the output files

package/src/utils/error.js

@@ -13,6 +13,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.assertIsError = void 0;
 const assert_1 = __importDefault(require("assert"));
 function assertIsError(value) {
-    (0, assert_1.default)(value instanceof Error, 'catch clause variable is not an Error instance');
+    const isError = value instanceof Error ||
+        // The following is needing to identify errors coming from RxJs.
+        (typeof value === 'object' && value && 'name' in value && 'message' in value);
+    (0, assert_1.default)(isError, 'catch clause variable is not an Error instance');
 }
 exports.assertIsError = assertIsError;

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

@@ -98,6 +98,23 @@ 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/configs/styles.d.ts

@@ -8,7 +8,7 @@
 import { Configuration } from 'webpack';
 import { StyleElement } from '../../builders/browser/schema';
 import { WebpackConfigOptions } from '../../utils/build-options';
-export declare function resolveGlobalStyles(styleEntrypoints: StyleElement[], root: string, preserveSymlinks: boolean): {
+export declare function resolveGlobalStyles(styleEntrypoints: StyleElement[], root: string, preserveSymlinks: boolean, skipResolution?: boolean): {
     entryPoints: Record<string, string[]>;
     noInjectNames: string[];
     paths: string[];

package/src/webpack/configs/styles.js

@@ -41,7 +41,7 @@ const sass_service_1 = require("../../sass/sass-service");
 const plugins_1 = require("../plugins");
 const css_optimizer_plugin_1 = require("../plugins/css-optimizer-plugin");
 const helpers_1 = require("../utils/helpers");
-function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
+function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks, skipResolution = false) {
     const entryPoints = {};
     const noInjectNames = [];
     const paths = [];
@@ -49,29 +49,32 @@ function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
         return { entryPoints, noInjectNames, paths };
     }
     for (const style of (0, helpers_1.normalizeExtraEntryPoints)(styleEntrypoints, 'styles')) {
-        let resolvedPath = path.resolve(root, style.input);
-        if (!fs.existsSync(resolvedPath)) {
-            try {
-                resolvedPath = require.resolve(style.input, { paths: [root] });
+        let stylesheetPath = style.input;
+        if (!skipResolution) {
+            stylesheetPath = path.resolve(root, stylesheetPath);
+            if (!fs.existsSync(stylesheetPath)) {
+                try {
+                    stylesheetPath = require.resolve(style.input, { paths: [root] });
+                }
+                catch { }
             }
-            catch { }
         }
         if (!preserveSymlinks) {
-            resolvedPath = fs.realpathSync(resolvedPath);
+            stylesheetPath = fs.realpathSync(stylesheetPath);
         }
         // Add style entry points.
         if (entryPoints[style.bundleName]) {
-            entryPoints[style.bundleName].push(resolvedPath);
+            entryPoints[style.bundleName].push(stylesheetPath);
         }
         else {
-            entryPoints[style.bundleName] = [resolvedPath];
+            entryPoints[style.bundleName] = [stylesheetPath];
         }
         // Add non injected styles to the list.
         if (!style.inject) {
             noInjectNames.push(style.bundleName);
         }
         // Add global css paths.
-        paths.push(resolvedPath);
+        paths.push(stylesheetPath);
     }
     return { entryPoints, noInjectNames, paths };
 }

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);