@angular/build 18.2.0-next.0 → 18.2.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "18.2.0-next.0",
+  "version": "18.2.0-next.1",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,30 +23,29 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1802.0-next.0",
-    "@babel/core": "7.24.7",
+    "@angular-devkit/architect": "0.1802.0-next.1",
+    "@babel/core": "7.24.9",
     "@babel/helper-annotate-as-pure": "7.24.7",
     "@babel/helper-split-export-declaration": "7.24.7",
     "@babel/plugin-syntax-import-attributes": "7.24.7",
-    "@inquirer/confirm": "3.1.14",
+    "@inquirer/confirm": "3.1.15",
     "@vitejs/plugin-basic-ssl": "1.1.0",
-    "ansi-colors": "4.1.3",
     "browserslist": "^4.23.0",
     "critters": "0.0.24",
     "esbuild": "0.23.0",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.5",
+    "listr2": "8.2.3",
     "lmdb": "3.0.12",
     "magic-string": "0.30.10",
     "mrmime": "2.0.0",
-    "ora": "5.4.1",
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.2",
     "piscina": "4.6.1",
     "rollup": "4.18.1",
-    "sass": "1.77.7",
-    "semver": "7.6.2",
-    "vite": "5.3.3",
+    "sass": "1.77.8",
+    "semver": "7.6.3",
+    "vite": "5.3.4",
     "watchpack": "2.4.1"
   },
   "peerDependencies": {

package/src/builders/application/options.js

@@ -242,7 +242,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
         plugins: extensions?.codePlugins?.length ? extensions?.codePlugins : undefined,
         loaderExtensions,
         jsonLogs: environment_options_1.useJSONBuildLogs,
-        colors: color_1.colors.enabled,
+        colors: (0, color_1.supportColor)(),
         clearScreen,
         define,
     };

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

@@ -42,6 +42,7 @@ const node_module_1 = require("node:module");
 const node_path_1 = require("node:path");
 const angular_memory_plugin_1 = require("../../tools/vite/angular-memory-plugin");
 const i18n_locale_plugin_1 = require("../../tools/vite/i18n-locale-plugin");
+const id_prefix_plugin_1 = require("../../tools/vite/id-prefix-plugin");
 const utils_1 = require("../../utils");
 const load_esm_1 = require("../../utils/load-esm");
 const internal_1 = require("./internal");
@@ -441,6 +442,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 extensionMiddleware,
                 normalizePath,
             }),
+            (0, id_prefix_plugin_1.createRemoveIdPrefixPlugin)(externalMetadata.explicit),
         ],
         // Browser only optimizeDeps. (This does not run for SSR dependencies).
         optimizeDeps: getDepOptimizationConfig({

package/src/builders/extract-i18n/builder.js

@@ -128,12 +128,13 @@ async function createSerializer(localizeToolsModule, format, sourceLocale, baseP
         case schema_1.Format.LegacyMigrate:
             return new LegacyMessageIdMigrationSerializer(diagnostics);
         case schema_1.Format.Arb:
-            const fileSystem = {
+            return new ArbTranslationSerializer(sourceLocale, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            basePath, {
                 relative(from, to) {
                     return node_path_1.default.relative(from, to);
                 },
-            };
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return new ArbTranslationSerializer(sourceLocale, basePath, fileSystem);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            });
     }
 }

package/src/builders/extract-i18n/options.js

@@ -37,8 +37,8 @@ async function normalizeOptions(context, projectName, options) {
     // Normalize xliff format extensions
     let format = options.format;
     switch (format) {
-        case undefined:
         // Default format is xliff1
+        case undefined:
         case schema_1.Format.Xlf:
         case schema_1.Format.Xlif:
         case schema_1.Format.Xliff:

package/src/tools/angular/transformers/jit-bootstrap-transformer.js

@@ -98,9 +98,8 @@ function elideImports(sourceFile, removedNodes, getTypeChecker, compilerOptions)
         let symbol;
         switch (node.kind) {
             case typescript_1.default.SyntaxKind.Identifier:
-                const parent = node.parent;
-                if (parent && typescript_1.default.isShorthandPropertyAssignment(parent)) {
-                    const shorthandSymbol = typeChecker.getShorthandAssignmentValueSymbol(parent);
+                if (node.parent && typescript_1.default.isShorthandPropertyAssignment(node.parent)) {
+                    const shorthandSymbol = typeChecker.getShorthandAssignmentValueSymbol(node.parent);
                     if (shorthandSymbol) {
                         symbol = shorthandSymbol;
                     }

package/src/tools/angular/transformers/jit-resource-transformer.js

@@ -116,7 +116,7 @@ function visitComponentMetadata(nodeFactory, node, styleReplacements, resourceIm
                 return undefined;
             }
             return node;
-        case 'styleUrls':
+        case 'styleUrls': {
             if (!typescript_1.default.isArrayLiteralExpression(node.initializer)) {
                 return node;
             }
@@ -132,6 +132,7 @@ function visitComponentMetadata(nodeFactory, node, styleReplacements, resourceIm
             styleReplacements.push(...externalStyles);
             // The external styles will be added afterwards in combination with any inline styles
             return undefined;
+        }
         default:
             // All other elements are passed through
             return node;

package/src/tools/esbuild/application-code-bundle.js

@@ -23,6 +23,7 @@ const compiler_plugin_1 = require("./angular/compiler-plugin");
 const compiler_plugin_options_1 = require("./compiler-plugin-options");
 const external_packages_plugin_1 = require("./external-packages-plugin");
 const i18n_locale_plugin_1 = require("./i18n-locale-plugin");
+const loader_import_attribute_plugin_1 = require("./loader-import-attribute-plugin");
 const rxjs_esm_resolution_plugin_1 = require("./rxjs-esm-resolution-plugin");
 const sourcemap_ignorelist_plugin_1 = require("./sourcemap-ignorelist-plugin");
 const utils_1 = require("./utils");
@@ -45,6 +46,7 @@ function createBrowserCodeBundleOptions(options, target, sourceFileCache) {
         target,
         supported: (0, utils_1.getFeatureSupport)(target, zoneless),
         plugins: [
+            (0, loader_import_attribute_plugin_1.createLoaderImportAttributePlugin)(),
             (0, wasm_plugin_1.createWasmPlugin)({ allowAsync: zoneless, cache: sourceFileCache?.loadResultCache }),
             (0, sourcemap_ignorelist_plugin_1.createSourcemapIgnorelistPlugin)(),
             (0, compiler_plugin_1.createCompilerPlugin)(
@@ -146,6 +148,7 @@ function createServerCodeBundleOptions(options, target, sourceFileCache) {
         entryPoints,
         supported: (0, utils_1.getFeatureSupport)(target, zoneless),
         plugins: [
+            (0, loader_import_attribute_plugin_1.createLoaderImportAttributePlugin)(),
             (0, wasm_plugin_1.createWasmPlugin)({ allowAsync: zoneless, cache: sourceFileCache?.loadResultCache }),
             (0, sourcemap_ignorelist_plugin_1.createSourcemapIgnorelistPlugin)(),
             (0, compiler_plugin_1.createCompilerPlugin)(

package/src/tools/esbuild/budget-stats.js

@@ -45,7 +45,10 @@ function generateBudgetStats(metafile, outputFiles, initialFiles) {
     }
     // Add component styles from metafile
     // TODO: Provide this information directly from the AOT compiler
-    for (const entry of Object.values(metafile.outputs)) {
+    for (const [file, entry] of Object.entries(metafile.outputs)) {
+        if (!file.endsWith('.css')) {
+            continue;
+        }
         // 'ng-component' is set by the angular plugin's component stylesheet bundler
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const componentStyle = entry['ng-component'];

package/src/tools/esbuild/loader-import-attribute-plugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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.dev/license
+ */
+import type { Plugin } from 'esbuild';
+export declare function createLoaderImportAttributePlugin(): Plugin;

package/src/tools/esbuild/loader-import-attribute-plugin.js

@@ -0,0 +1,41 @@
+"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.dev/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLoaderImportAttributePlugin = createLoaderImportAttributePlugin;
+const promises_1 = require("node:fs/promises");
+const SUPPORTED_LOADERS = ['binary', 'file', 'text'];
+function createLoaderImportAttributePlugin() {
+    return {
+        name: 'angular-loader-import-attributes',
+        setup(build) {
+            build.onLoad({ filter: /./ }, async (args) => {
+                const loader = args.with['loader'];
+                if (!loader) {
+                    return undefined;
+                }
+                if (!SUPPORTED_LOADERS.includes(loader)) {
+                    return {
+                        errors: [
+                            {
+                                text: 'Unsupported loader import attribute',
+                                notes: [
+                                    { text: 'Attribute value must be one of: ' + SUPPORTED_LOADERS.join(', ') },
+                                ],
+                            },
+                        ],
+                    };
+                }
+                return {
+                    contents: await (0, promises_1.readFile)(args.path),
+                    loader,
+                };
+            });
+        },
+    };
+}

package/src/tools/esbuild/utils.js

@@ -27,6 +27,7 @@ exports.logMessages = logMessages;
 exports.isZonelessApp = isZonelessApp;
 exports.getEntryPointName = getEntryPointName;
 const esbuild_1 = require("esbuild");
+const listr2_1 = require("listr2");
 const node_crypto_1 = require("node:crypto");
 const node_fs_1 = require("node:fs");
 const promises_1 = __importDefault(require("node:fs/promises"));
@@ -34,7 +35,6 @@ const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
 const node_zlib_1 = require("node:zlib");
 const semver_1 = require("semver");
-const spinner_1 = require("../../utils/spinner");
 const stats_table_1 = require("../../utils/stats-table");
 const bundler_context_1 = require("./bundler-context");
 function logBuildStats(metafile, outputFiles, initial, budgetFailures, colors, changedFiles, estimatedTransferSizes, ssrOutputEnabled, verbose) {
@@ -124,14 +124,17 @@ async function calculateEstimatedTransferSizes(outputFiles) {
     });
 }
 async function withSpinner(text, action) {
-    const spinner = new spinner_1.Spinner(text);
-    spinner.start();
-    try {
-        return await action();
-    }
-    finally {
-        spinner.stop();
-    }
+    let result;
+    const taskList = new listr2_1.Listr([
+        {
+            title: text,
+            async task() {
+                result = await action();
+            },
+        },
+    ], { rendererOptions: { clearOutput: true } });
+    await taskList.run();
+    return result;
 }
 async function withNoProgress(text, action) {
     return action();

package/src/tools/esbuild/wasm-plugin.js

@@ -35,7 +35,7 @@ function createWasmPlugin(options) {
     return {
         name: 'angular-wasm',
         setup(build) {
-            build.onResolve({ filter: /.wasm$/ }, async (args) => {
+            build.onResolve({ filter: /\.wasm$/ }, async (args) => {
                 // Skip if already resolving the WASM file to avoid infinite resolution
                 if (args.pluginData?.[WASM_RESOLVE_SYMBOL]) {
                     return;
@@ -75,7 +75,7 @@ function createWasmPlugin(options) {
                     namespace: WASM_INIT_NAMESPACE,
                 };
             });
-            build.onLoad({ filter: /.wasm$/, namespace: WASM_INIT_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
+            build.onLoad({ filter: /\.wasm$/, namespace: WASM_INIT_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
                 // Ensure async mode is supported
                 if (!allowAsync) {
                     return {
@@ -155,7 +155,7 @@ function createWasmPlugin(options) {
                     watchFiles: [args.path],
                 };
             }));
-            build.onLoad({ filter: /.wasm$/, namespace: WASM_CONTENTS_NAMESPACE }, async (args) => {
+            build.onLoad({ filter: /\.wasm$/, namespace: WASM_CONTENTS_NAMESPACE }, async (args) => {
                 const contents = args.pluginData.wasmContents ?? (await (0, promises_1.readFile)(args.path));
                 let loader = 'file';
                 if (args.with.loader) {

package/src/tools/vite/id-prefix-plugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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.dev/license
+ */
+import type { Plugin } from 'vite';
+export declare function createRemoveIdPrefixPlugin(externals: string[]): Plugin;

package/src/tools/vite/id-prefix-plugin.js

@@ -0,0 +1,45 @@
+"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.dev/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRemoveIdPrefixPlugin = createRemoveIdPrefixPlugin;
+// NOTE: the implementation for this Vite plugin is roughly based on:
+// https://github.com/MilanKovacic/vite-plugin-externalize-dependencies
+const VITE_ID_PREFIX = '/@id/';
+const escapeRegexSpecialChars = (inputString) => {
+    return inputString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+};
+function createRemoveIdPrefixPlugin(externals) {
+    return {
+        name: 'angular-plugin-remove-id-prefix',
+        apply: 'serve',
+        configResolved: (resolvedConfig) => {
+            // don't do anything when the list of externals is empty
+            if (externals.length === 0) {
+                return;
+            }
+            const escapedExternals = externals.map(escapeRegexSpecialChars);
+            const prefixedExternalRegex = new RegExp(`${VITE_ID_PREFIX}(${escapedExternals.join('|')})`, 'g');
+            // @ts-expect-error: Property 'push' does not exist on type 'readonly Plugin<any>[]'
+            // Reasoning:
+            //  since the /@id/ prefix is added by Vite's import-analysis plugin,
+            //  we must add our actual plugin dynamically, to ensure that it will run
+            //  AFTER the import-analysis.
+            resolvedConfig.plugins.push({
+                name: 'angular-plugin-remove-id-prefix-transform',
+                transform: (code) => {
+                    // don't do anything when code does not contain the Vite prefix
+                    if (!code.includes(VITE_ID_PREFIX)) {
+                        return code;
+                    }
+                    return code.replace(prefixedExternalRegex, (_, externalName) => externalName);
+                },
+            });
+        },
+    };
+}

package/src/utils/color.d.ts

@@ -5,6 +5,5 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
-import * as ansiColors from 'ansi-colors';
-declare const colors: typeof ansiColors;
-export { colors };
+export { color as colors, figures } from 'listr2';
+export declare function supportColor(stream?: NodeJS.WritableStream): boolean;

package/src/utils/color.js

@@ -6,58 +6,22 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/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.colors = void 0;
-const ansiColors = __importStar(require("ansi-colors"));
+exports.figures = exports.colors = void 0;
+exports.supportColor = supportColor;
 const node_tty_1 = require("node:tty");
-function supportColor() {
-    if (process.env.FORCE_COLOR !== undefined) {
-        // 2 colors: FORCE_COLOR = 0 (Disables colors), depth 1
-        // 16 colors: FORCE_COLOR = 1, depth 4
-        // 256 colors: FORCE_COLOR = 2, depth 8
-        // 16,777,216 colors: FORCE_COLOR = 3, depth 16
-        // See: https://nodejs.org/dist/latest-v12.x/docs/api/tty.html#tty_writestream_getcolordepth_env
-        // and https://github.com/nodejs/node/blob/b9f36062d7b5c5039498e98d2f2c180dca2a7065/lib/internal/tty.js#L106;
-        switch (process.env.FORCE_COLOR) {
-            case '':
-            case 'true':
-            case '1':
-            case '2':
-            case '3':
-                return true;
-            default:
-                return false;
-        }
+var listr2_1 = require("listr2");
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return listr2_1.color; } });
+Object.defineProperty(exports, "figures", { enumerable: true, get: function () { return listr2_1.figures; } });
+function supportColor(stream = process.stdout) {
+    if (stream instanceof node_tty_1.WriteStream) {
+        return stream.hasColors();
+    }
+    try {
+        // The hasColors function does not rely on any instance state and should ideally be static
+        return node_tty_1.WriteStream.prototype.hasColors();
     }
-    if (process.stdout instanceof node_tty_1.WriteStream) {
-        return process.stdout.hasColors();
+    catch {
+        return process.env['FORCE_COLOR'] !== undefined && process.env['FORCE_COLOR'] !== '0';
     }
-    return false;
 }
-// Create a separate instance to prevent unintended global changes to the color configuration
-const colors = ansiColors.create();
-exports.colors = colors;
-colors.enabled = supportColor();

package/src/utils/index-file/inline-fonts.js

@@ -137,7 +137,7 @@ class InlineFontsProcessor {
                         rewriter.emitRaw(`<link rel="preconnect" href="${url}" crossorigin>`);
                     }
                     break;
-                case 'link':
+                case 'link': {
                     const hrefAttr = attrs.some(({ name, value }) => name === 'rel' && value === 'stylesheet') &&
                         attrs.find(({ name, value }) => name === 'href' && hrefsContent.has(value));
                     if (hrefAttr) {
@@ -149,6 +149,7 @@ class InlineFontsProcessor {
                         rewriter.emitStartTag(tag);
                     }
                     break;
+                }
                 default:
                     rewriter.emitStartTag(tag);
                     break;

package/src/utils/normalize-cache.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeCacheOptions = normalizeCacheOptions;
 const node_path_1 = require("node:path");
 /** Version placeholder is replaced during the build process with actual package version */
-const VERSION = '18.2.0-next.0';
+const VERSION = '18.2.0-next.1';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/spinner.d.ts

@@ -1,20 +0,0 @@
-/**
- * @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.dev/license
- */
-export declare class Spinner {
-    #private;
-    private readonly spinner;
-    /** When false, only fail messages will be displayed. */
-    enabled: boolean;
-    constructor(text?: string);
-    set text(text: string);
-    get isSpinning(): boolean;
-    succeed(text?: string): void;
-    fail(text?: string): void;
-    stop(): void;
-    start(text?: string): void;
-}

package/src/utils/spinner.js

@@ -1,55 +0,0 @@
-"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.dev/license
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = void 0;
-const ora_1 = __importDefault(require("ora"));
-const color_1 = require("./color");
-const tty_1 = require("./tty");
-class Spinner {
-    spinner;
-    /** When false, only fail messages will be displayed. */
-    enabled = true;
-    #isTTY = (0, tty_1.isTTY)();
-    constructor(text) {
-        this.spinner = (0, ora_1.default)({
-            text: text === undefined ? undefined : text + '\n',
-            // The below 2 options are needed because otherwise CTRL+C will be delayed
-            // when the underlying process is sync.
-            hideCursor: false,
-            discardStdin: false,
-            isEnabled: this.#isTTY,
-        });
-    }
-    set text(text) {
-        this.spinner.text = text;
-    }
-    get isSpinning() {
-        return this.spinner.isSpinning || !this.#isTTY;
-    }
-    succeed(text) {
-        if (this.enabled) {
-            this.spinner.succeed(text);
-        }
-    }
-    fail(text) {
-        this.spinner.fail(text && color_1.colors.redBright(text));
-    }
-    stop() {
-        this.spinner.stop();
-    }
-    start(text) {
-        if (this.enabled) {
-            this.spinner.start(text);
-        }
-    }
-}
-exports.Spinner = Spinner;