@angular-devkit/build-angular 17.0.1 → 17.0.2

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.1",
-    "@angular-devkit/architect": "0.1700.1",
-    "@angular-devkit/build-webpack": "0.1700.1",
-    "@angular-devkit/core": "17.0.1",
+    "@angular-devkit/architect": "0.1700.2",
+    "@angular-devkit/build-webpack": "0.1700.2",
+    "@angular-devkit/core": "17.0.2",
     "@babel/core": "7.23.2",
     "@babel/generator": "7.23.0",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,7 +20,7 @@
     "@babel/preset-env": "7.23.2",
     "@babel/runtime": "7.23.2",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.0.1",
+    "@ngtools/webpack": "17.0.2",
     "@vitejs/plugin-basic-ssl": "1.0.1",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",

package/src/builders/application/i18n.js

@@ -9,6 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadActiveTranslations = exports.inlineI18n = void 0;
 const node_path_1 = require("node:path");
+const bundler_context_1 = require("../../tools/esbuild/bundler-context");
 const i18n_inliner_1 = require("../../tools/esbuild/i18n-inliner");
 const environment_options_1 = require("../../utils/environment-options");
 const i18n_options_1 = require("../../utils/i18n-options");
@@ -72,8 +73,13 @@ async function inlineI18n(options, executionResult, initialFiles) {
     finally {
         await inliner.close();
     }
-    // Update the result with all localized files
-    executionResult.outputFiles = updatedOutputFiles;
+    // Update the result with all localized files.
+    executionResult.outputFiles = [
+        // Root files are not modified.
+        ...executionResult.outputFiles.filter(({ type }) => type === bundler_context_1.BuildOutputFileType.Root),
+        // Updated files for each locale.
+        ...updatedOutputFiles,
+    ];
     // Assets are only changed if not using the flat output option
     if (options.i18nOptions.flatOutput !== true) {
         executionResult.assetFiles = updatedAssetFiles;

package/src/builders/browser-esbuild/builder-status-warnings.js

@@ -18,8 +18,6 @@ const UNSUPPORTED_OPTIONS = [
     'webWorkerTsConfig',
 ];
 function logBuilderStatusWarnings(options, { logger }) {
-    logger.warn(`The 'browser-esbuild' builder is a compatibility builder which will be removed in a future major ` +
-        `version in favor of the 'application' builder.`);
     // Validate supported options
     for (const unsupportedOption of UNSUPPORTED_OPTIONS) {
         const value = options[unsupportedOption];

package/src/builders/dev-server/vite-server.d.ts

@@ -25,5 +25,5 @@ export declare function serveWithVite(serverOptions: NormalizedDevServerOptions,
     middleware?: Connect.NextHandleFunction[];
     buildPlugins?: Plugin[];
 }): AsyncIterableIterator<DevServerBuilderOutput>;
-export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: ExternalResultMetadata, ssr: boolean, prebundleTransformer: JavaScriptTransformer, target: string[], extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>): Promise<InlineConfig>;
+export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: ExternalResultMetadata, ssr: boolean, prebundleTransformer: JavaScriptTransformer, target: string[], extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>, thirdPartySourcemaps?: boolean): Promise<InlineConfig>;
 export {};

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

@@ -44,6 +44,7 @@ const javascript_transformer_1 = require("../../tools/esbuild/javascript-transfo
 const rxjs_esm_resolution_plugin_1 = require("../../tools/esbuild/rxjs-esm-resolution-plugin");
 const utils_1 = require("../../tools/esbuild/utils");
 const i18n_locale_plugin_1 = require("../../tools/vite/i18n-locale-plugin");
+const utils_2 = require("../../utils");
 const render_page_1 = require("../../utils/server-rendering/render-page");
 const supported_browsers_1 = require("../../utils/supported-browsers");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
@@ -86,12 +87,13 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
         // When localization is enabled with a single locale, force a flat path to maintain behavior with the existing Webpack-based dev server.
         browserOptions.forceI18nFlatOutput = true;
     }
+    const { vendor: thirdPartySourcemaps } = (0, utils_2.normalizeSourceMaps)(browserOptions.sourceMap ?? false);
     // Setup the prebundling transformer that will be shared across Vite prebundling requests
     const prebundleTransformer = new javascript_transformer_1.JavaScriptTransformer(
     // Always enable JIT linking to support applications built with and without AOT.
     // In a development environment the additional scope information does not
     // have a negative effect unlike production where final output size is relevant.
-    { sourcemap: true, jit: true, thirdPartySourcemaps: true }, 1, true);
+    { sourcemap: true, jit: true, thirdPartySourcemaps }, 1, true);
     // Extract output index from options
     // TODO: Provide this info from the build results
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -115,9 +117,9 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
         await prebundleTransformer.close();
         deferred?.();
     });
-    const build = builderName === '@angular-devkit/build-angular:application'
-        ? application_1.buildApplicationInternal
-        : browser_esbuild_1.buildEsbuildBrowser;
+    const build = builderName === '@angular-devkit/build-angular:browser-esbuild'
+        ? browser_esbuild_1.buildEsbuildBrowser
+        : application_1.buildApplicationInternal;
     // TODO: Switch this to an architect schedule call when infrastructure settings are supported
     for await (const result of build(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -186,7 +188,7 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
             const browsers = (0, supported_browsers_1.getSupportedBrowsers)(projectRoot, context.logger);
             const target = (0, utils_1.transformSupportedBrowsersToTargets)(browsers);
             // Setup server and start listening
-            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, prebundleTransformer, target, extensions?.middleware, transformers?.indexHtml);
+            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, prebundleTransformer, target, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
             if (serverConfiguration.ssr?.optimizeDeps?.disabled === false) {
@@ -305,7 +307,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
     }
 }
 // eslint-disable-next-line max-lines-per-function
-async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, extensionMiddleware, indexHtmlTransformer) {
+async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
     const proxy = await (0, load_proxy_config_1.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig, true);
     // dynamically import Vite for ESM compatibility
     const { normalizePath } = await Promise.resolve().then(() => __importStar(require('vite')));
@@ -372,6 +374,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 ssr: true,
                 prebundleTransformer,
                 target,
+                thirdPartySourcemaps,
             }),
         },
         plugins: [
@@ -427,7 +430,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                         }
                         const remappedMap = (0, remapping_1.default)([result.map, map], () => null);
                         // Set the sourcemap root to the workspace root. This is needed since we set a virtual path as root.
-                        remappedMap.sourceRoot = serverOptions.workspaceRoot + '/';
+                        remappedMap.sourceRoot = normalizePath(serverOptions.workspaceRoot) + '/';
                         return {
                             ...result,
                             map: remappedMap,
@@ -569,6 +572,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             ssr: false,
             prebundleTransformer,
             target,
+            thirdPartySourcemaps,
         }),
     };
     if (serverOptions.ssl) {
@@ -617,10 +621,10 @@ function pathnameWithoutServePath(url, serverOptions) {
     }
     return pathname;
 }
-function getDepOptimizationConfig({ disabled, exclude, include, target, prebundleTransformer, ssr, }) {
+function getDepOptimizationConfig({ disabled, exclude, include, target, prebundleTransformer, ssr, thirdPartySourcemaps, }) {
     const plugins = [
         {
-            name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}`,
+            name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}${thirdPartySourcemaps ? '-vendor-sourcemap' : ''}`,
             setup(build) {
                 build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
                     return {

package/src/tools/esbuild/angular/compiler-plugin.js

@@ -37,9 +37,9 @@ exports.createCompilerPlugin = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const path = __importStar(require("node:path"));
-const node_url_1 = require("node:url");
 const environment_options_1 = require("../../../utils/environment-options");
 const javascript_transformer_1 = require("../javascript-transformer");
+const load_result_cache_1 = require("../load-result-cache");
 const profiling_1 = require("../profiling");
 const compilation_1 = require("./compilation");
 const compilation_state_1 = require("./compilation-state");
@@ -216,7 +216,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 try {
                     await (0, profiling_1.profileAsync)('NG_EMIT_TS', async () => {
                         for (const { filename, contents } of await compilation.emitAffectedFiles()) {
-                            typeScriptFileCache.set((0, node_url_1.pathToFileURL)(filename).href, contents);
+                            typeScriptFileCache.set(path.normalize(filename), contents);
                         }
                     });
                 }
@@ -253,7 +253,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 return result;
             });
             build.onLoad({ filter: /\.[cm]?[jt]sx?$/ }, async (args) => {
-                const request = pluginOptions.fileReplacements?.[args.path] ?? args.path;
+                const request = path.normalize(pluginOptions.fileReplacements?.[path.normalize(args.path)] ?? args.path);
                 // Skip TS load attempt if JS TypeScript compilation not enabled and file is JS
                 if (shouldTsIgnoreJs && /\.[cm]?js$/.test(request)) {
                     return undefined;
@@ -262,7 +262,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // the options cannot change and do not need to be represented in the key. If the
                 // cache is later stored to disk, then the options that affect transform output
                 // would need to be added to the key as well as a check for any change of content.
-                let contents = typeScriptFileCache.get((0, node_url_1.pathToFileURL)(request).href);
+                let contents = typeScriptFileCache.get(request);
                 if (contents === undefined) {
                     // If the Angular compilation had errors the file may not have been emitted.
                     // To avoid additional errors about missing files, return empty contents.
@@ -285,28 +285,22 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     // A string indicates untransformed output from the TS/NG compiler
                     contents = await javascriptTransformer.transformData(request, contents, true /* skipLinker */);
                     // Store as the returned Uint8Array to allow caching the fully transformed code
-                    typeScriptFileCache.set((0, node_url_1.pathToFileURL)(request).href, contents);
+                    typeScriptFileCache.set(request, contents);
                 }
                 return {
                     contents,
                     loader: 'js',
                 };
             });
-            build.onLoad({ filter: /\.[cm]?js$/ }, (args) => (0, profiling_1.profileAsync)('NG_EMIT_JS*', async () => {
-                // The filename is currently used as a cache key. Since the cache is memory only,
-                // the options cannot change and do not need to be represented in the key. If the
-                // cache is later stored to disk, then the options that affect transform output
-                // would need to be added to the key as well as a check for any change of content.
-                let contents = pluginOptions.sourceFileCache?.babelFileCache.get(args.path);
-                if (contents === undefined) {
-                    contents = await javascriptTransformer.transformFile(args.path, pluginOptions.jit);
-                    pluginOptions.sourceFileCache?.babelFileCache.set(args.path, contents);
-                }
-                return {
-                    contents,
-                    loader: 'js',
-                };
-            }, true));
+            build.onLoad({ filter: /\.[cm]?js$/ }, (0, load_result_cache_1.createCachedLoad)(pluginOptions.loadResultCache, async (args) => {
+                return (0, profiling_1.profileAsync)('NG_EMIT_JS*', async () => {
+                    const contents = await javascriptTransformer.transformFile(args.path, pluginOptions.jit);
+                    return {
+                        contents,
+                        loader: 'js',
+                    };
+                }, true);
+            }));
             // Setup bundling of component templates and stylesheets when in JIT mode
             if (pluginOptions.jit) {
                 (0, jit_plugin_callbacks_1.setupJitPluginCallbacks)(build, stylesheetBundler, additionalResults, styleOptions.inlineStyleLanguage);
@@ -415,17 +409,19 @@ function bundleWebWorker(build, pluginOptions, workerFile) {
     }
 }
 function createMissingFileError(request, original, root) {
+    const relativeRequest = path.relative(root, request);
     const error = {
-        text: `File '${path.relative(root, request)}' is missing from the TypeScript compilation.`,
+        text: `File '${relativeRequest}' is missing from the TypeScript compilation.`,
         notes: [
             {
                 text: `Ensure the file is part of the TypeScript program via the 'files' or 'include' property.`,
             },
         ],
     };
-    if (request !== original) {
+    const relativeOriginal = path.relative(root, original);
+    if (relativeRequest !== relativeOriginal) {
         error.notes.push({
-            text: `File is requested from a file replacement of '${path.relative(root, original)}'.`,
+            text: `File is requested from a file replacement of '${relativeOriginal}'.`,
         });
     }
     return error;

package/src/tools/esbuild/angular/file-reference-tracker.js

@@ -8,23 +8,26 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileReferenceTracker = void 0;
+const node_path_1 = require("node:path");
 class FileReferenceTracker {
     #referencingFiles = new Map();
     get referencedFiles() {
         return this.#referencingFiles.keys();
     }
     add(containingFile, referencedFiles) {
+        const normalizedContainingFile = (0, node_path_1.normalize)(containingFile);
         for (const file of referencedFiles) {
-            if (file === containingFile) {
+            const normalizedReferencedFile = (0, node_path_1.normalize)(file);
+            if (normalizedReferencedFile === normalizedContainingFile) {
                 // Containing file is already known to the AOT compiler
                 continue;
             }
-            const referencing = this.#referencingFiles.get(file);
+            const referencing = this.#referencingFiles.get(normalizedReferencedFile);
             if (referencing === undefined) {
-                this.#referencingFiles.set(file, new Set([containingFile]));
+                this.#referencingFiles.set(normalizedReferencedFile, new Set([normalizedContainingFile]));
             }
             else {
-                referencing.add(containingFile);
+                referencing.add(normalizedContainingFile);
             }
         }
     }
@@ -37,14 +40,15 @@ class FileReferenceTracker {
         let allChangedFiles;
         // Add referencing files to fully notify the AOT compiler of required component updates
         for (const modifiedFile of changed) {
-            const referencing = this.#referencingFiles.get(modifiedFile);
+            const normalizedModifiedFile = (0, node_path_1.normalize)(modifiedFile);
+            const referencing = this.#referencingFiles.get(normalizedModifiedFile);
             if (referencing) {
                 allChangedFiles ??= new Set(changed);
                 for (const referencingFile of referencing) {
                     allChangedFiles.add(referencingFile);
                 }
                 // Cleanup the stale record which will be updated by new resource transforms
-                this.#referencingFiles.delete(modifiedFile);
+                this.#referencingFiles.delete(normalizedModifiedFile);
             }
         }
         return allChangedFiles ?? changed;

package/src/tools/esbuild/angular/source-file-cache.d.ts

@@ -10,7 +10,6 @@ import { MemoryLoadResultCache } from '../load-result-cache';
 export declare class SourceFileCache extends Map<string, ts.SourceFile> {
     readonly persistentCachePath?: string | undefined;
     readonly modifiedFiles: Set<string>;
-    readonly babelFileCache: Map<string, Uint8Array>;
     readonly typeScriptFileCache: Map<string, string | Uint8Array>;
     readonly loadResultCache: MemoryLoadResultCache;
     referencedFiles?: readonly string[];

package/src/tools/esbuild/angular/source-file-cache.js

@@ -33,14 +33,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SourceFileCache = void 0;
 const node_os_1 = require("node:os");
 const path = __importStar(require("node:path"));
-const node_url_1 = require("node:url");
 const load_result_cache_1 = require("../load-result-cache");
 const USING_WINDOWS = (0, node_os_1.platform)() === 'win32';
 const WINDOWS_SEP_REGEXP = new RegExp(`\\${path.win32.sep}`, 'g');
 class SourceFileCache extends Map {
     persistentCachePath;
     modifiedFiles = new Set();
-    babelFileCache = new Map();
     typeScriptFileCache = new Map();
     loadResultCache = new load_result_cache_1.MemoryLoadResultCache();
     referencedFiles;
@@ -53,8 +51,8 @@ class SourceFileCache extends Map {
             this.modifiedFiles.clear();
         }
         for (let file of files) {
-            this.babelFileCache.delete(file);
-            this.typeScriptFileCache.delete((0, node_url_1.pathToFileURL)(file).href);
+            file = path.normalize(file);
+            this.typeScriptFileCache.delete(file);
             this.loadResultCache.invalidate(file);
             // Normalize separators to allow matching TypeScript Host paths
             if (USING_WINDOWS) {

package/src/tools/esbuild/bundler-execution-result.js

@@ -8,6 +8,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExecutionResult = void 0;
+const node_path_1 = require("node:path");
 const utils_1 = require("./utils");
 /**
  * Represents the result of a single builder execute call.
@@ -57,11 +58,15 @@ class ExecutionResult {
         };
     }
     get watchFiles() {
+        // Bundler contexts internally normalize file dependencies
         const files = this.rebuildContexts.flatMap((context) => [...context.watchFiles]);
         if (this.codeBundleCache?.referencedFiles) {
-            files.push(...this.codeBundleCache.referencedFiles);
+            // These files originate from TS/NG and can have POSIX path separators even on Windows.
+            // To ensure path comparisons are valid, all these paths must be normalized.
+            files.push(...this.codeBundleCache.referencedFiles.map(node_path_1.normalize));
         }
         if (this.codeBundleCache?.loadResultCache) {
+            // Load result caches internally normalize file dependencies
             files.push(...this.codeBundleCache.loadResultCache.watchFiles);
         }
         return files;

package/src/tools/esbuild/load-result-cache.js

@@ -20,6 +20,11 @@ function createCachedLoad(cache, callback) {
             result = await callback(args);
             // Do not cache null or undefined
             if (result) {
+                // Ensure requested path is included if it was a resolved file
+                if (args.namespace === 'file') {
+                    result.watchFiles ??= [];
+                    result.watchFiles.push(args.path);
+                }
                 await cache.put(loadCacheKey, result);
             }
         }
@@ -59,7 +64,9 @@ class MemoryLoadResultCache {
         return found;
     }
     get watchFiles() {
-        return [...this.#loadResults.keys(), ...this.#fileDependencies.keys()];
+        // this.#loadResults.keys() is not included here because the keys
+        // are namespaced request paths and not disk-based file paths.
+        return [...this.#fileDependencies.keys()];
     }
 }
 exports.MemoryLoadResultCache = MemoryLoadResultCache;

package/src/tools/esbuild/angular/application-compiler.d.ts

@@ -1,7 +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.io/license
- */

package/src/tools/esbuild/angular/application-compiler.js

@@ -1,41 +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.io/license
- */
-// import { AngularCompilation, createAngularCompilation } from './compilation';
-// import { ComponentStylesheetBundler } from './component-stylesheets';
-// export interface InvalidationResult {
-//   code: boolean;
-//   styles: string[];
-// }
-// export class ApplicationAngularCompiler {
-//   #compilation: AngularCompilation | undefined;
-//   #stylesheetBundler: ComponentStylesheetBundler;
-//   readonly #emitFileCache = new Map<string, string>();
-//   constructor(options: { persistentCachePath?: string; jitMode?: boolean, incremental?: boolean }) {
-//     const {
-//       jitMode = false,
-//       incremental = false,
-//       persistentCachePath,
-//     } = options;
-//     this.#stylesheetBundler = new ComponentStylesheetBundler({}, incremental);
-//   }
-//   get isJit(): boolean {
-//     return false;
-//   }
-//   get usesAllowJs(): boolean {
-//     return false;
-//   }
-//   async initialize() {
-//   }
-//   invalidate(files: Iterable<string>): InvalidationResult {
-//     return {
-//       code: true,
-//       styles: [],
-//     };
-//   }
-// }