@angular-devkit/build-angular 14.1.1 → 14.1.2

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.1.1",
+  "version": "14.1.2",
   "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.1",
-    "@angular-devkit/build-webpack": "0.1401.1",
-    "@angular-devkit/core": "14.1.1",
+    "@angular-devkit/architect": "0.1401.2",
+    "@angular-devkit/build-webpack": "0.1401.2",
+    "@angular-devkit/core": "14.1.2",
     "@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.1",
+    "@ngtools/webpack": "14.1.2",
     "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

@@ -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/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,
+        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/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);