@angular-devkit/build-angular 17.1.0 → 17.2.0-next.0

package/src/tools/esbuild/angular/compilation/aot-compilation.js

@@ -86,22 +86,33 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
         this.#state = new AngularCompilationState(angularProgram, host, typeScriptProgram, affectedFiles, affectedFiles.size === 1 ? OptimizeFor.SingleFile : OptimizeFor.WholeProgram, (0, web_worker_transformer_1.createWorkerTransformer)(hostOptions.processWebWorker.bind(hostOptions)), this.#state?.diagnosticCache);
         return { affectedFiles, compilerOptions, referencedFiles };
     }
-    *collectDiagnostics() {
+    *collectDiagnostics(modes) {
         (0, node_assert_1.default)(this.#state, 'Angular compilation must be initialized prior to collecting diagnostics.');
         const { affectedFiles, angularCompiler, diagnosticCache, templateDiagnosticsOptimization, typeScriptProgram, } = this.#state;
+        const syntactic = modes & angular_compilation_1.DiagnosticModes.Syntactic;
+        const semantic = modes & angular_compilation_1.DiagnosticModes.Semantic;
         // Collect program level diagnostics
-        yield* typeScriptProgram.getConfigFileParsingDiagnostics();
-        yield* angularCompiler.getOptionDiagnostics();
-        yield* typeScriptProgram.getOptionsDiagnostics();
-        yield* typeScriptProgram.getGlobalDiagnostics();
+        if (modes & angular_compilation_1.DiagnosticModes.Option) {
+            yield* typeScriptProgram.getConfigFileParsingDiagnostics();
+            yield* angularCompiler.getOptionDiagnostics();
+            yield* typeScriptProgram.getOptionsDiagnostics();
+        }
+        if (syntactic) {
+            yield* typeScriptProgram.getGlobalDiagnostics();
+        }
         // Collect source file specific diagnostics
         for (const sourceFile of typeScriptProgram.getSourceFiles()) {
             if (angularCompiler.ignoreForDiagnostics.has(sourceFile)) {
                 continue;
             }
-            // TypeScript will use cached diagnostics for files that have not been
-            // changed or affected for this build when using incremental building.
-            yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SYNTACTIC', () => typeScriptProgram.getSyntacticDiagnostics(sourceFile), true);
+            if (syntactic) {
+                // TypeScript will use cached diagnostics for files that have not been
+                // changed or affected for this build when using incremental building.
+                yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SYNTACTIC', () => typeScriptProgram.getSyntacticDiagnostics(sourceFile), true);
+            }
+            if (!semantic) {
+                continue;
+            }
             yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SEMANTIC', () => typeScriptProgram.getSemanticDiagnostics(sourceFile), true);
             // Declaration files cannot have template diagnostics
             if (sourceFile.isDeclarationFile) {

package/src/tools/esbuild/angular/compilation/index.d.ts

@@ -5,6 +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 { AngularCompilation } from './angular-compilation';
+export { AngularCompilation, DiagnosticModes } from './angular-compilation';
 export { createAngularCompilation } from './factory';
 export { NoopCompilation } from './noop-compilation';

package/src/tools/esbuild/angular/compilation/index.js

@@ -7,9 +7,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoopCompilation = exports.createAngularCompilation = exports.AngularCompilation = void 0;
+exports.NoopCompilation = exports.createAngularCompilation = exports.DiagnosticModes = exports.AngularCompilation = void 0;
 var angular_compilation_1 = require("./angular-compilation");
 Object.defineProperty(exports, "AngularCompilation", { enumerable: true, get: function () { return angular_compilation_1.AngularCompilation; } });
+Object.defineProperty(exports, "DiagnosticModes", { enumerable: true, get: function () { return angular_compilation_1.DiagnosticModes; } });
 var factory_1 = require("./factory");
 Object.defineProperty(exports, "createAngularCompilation", { enumerable: true, get: function () { return factory_1.createAngularCompilation; } });
 var noop_compilation_1 = require("./noop-compilation");

package/src/tools/esbuild/angular/compilation/jit-compilation.d.ts

@@ -8,7 +8,7 @@
 import type ng from '@angular/compiler-cli';
 import ts from 'typescript';
 import { AngularHostOptions } from '../angular-host';
-import { AngularCompilation, EmitFileResult } from './angular-compilation';
+import { AngularCompilation, DiagnosticModes, EmitFileResult } from './angular-compilation';
 export declare class JitCompilation extends AngularCompilation {
     #private;
     initialize(tsconfig: string, hostOptions: AngularHostOptions, compilerOptionsTransformer?: (compilerOptions: ng.CompilerOptions) => ng.CompilerOptions): Promise<{
@@ -16,6 +16,6 @@ export declare class JitCompilation extends AngularCompilation {
         compilerOptions: ng.CompilerOptions;
         referencedFiles: readonly string[];
     }>;
-    collectDiagnostics(): Iterable<ts.Diagnostic>;
+    collectDiagnostics(modes: DiagnosticModes): Iterable<ts.Diagnostic>;
     emitAffectedFiles(): Iterable<EmitFileResult>;
 }

package/src/tools/esbuild/angular/compilation/jit-compilation.js

@@ -51,15 +51,21 @@ class JitCompilation extends angular_compilation_1.AngularCompilation {
             .map((sourceFile) => sourceFile.fileName);
         return { affectedFiles, compilerOptions, referencedFiles };
     }
-    *collectDiagnostics() {
+    *collectDiagnostics(modes) {
         (0, node_assert_1.default)(this.#state, 'Compilation must be initialized prior to collecting diagnostics.');
         const { typeScriptProgram } = this.#state;
         // Collect program level diagnostics
-        yield* typeScriptProgram.getConfigFileParsingDiagnostics();
-        yield* typeScriptProgram.getOptionsDiagnostics();
-        yield* typeScriptProgram.getGlobalDiagnostics();
-        yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SYNTACTIC', () => typeScriptProgram.getSyntacticDiagnostics());
-        yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SEMANTIC', () => typeScriptProgram.getSemanticDiagnostics());
+        if (modes & angular_compilation_1.DiagnosticModes.Option) {
+            yield* typeScriptProgram.getConfigFileParsingDiagnostics();
+            yield* typeScriptProgram.getOptionsDiagnostics();
+        }
+        if (modes & angular_compilation_1.DiagnosticModes.Syntactic) {
+            yield* typeScriptProgram.getGlobalDiagnostics();
+            yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SYNTACTIC', () => typeScriptProgram.getSyntacticDiagnostics());
+        }
+        if (modes & angular_compilation_1.DiagnosticModes.Semantic) {
+            yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SEMANTIC', () => typeScriptProgram.getSemanticDiagnostics());
+        }
     }
     emitAffectedFiles() {
         (0, node_assert_1.default)(this.#state, 'Compilation must be initialized prior to emitting files.');

package/src/tools/esbuild/angular/compilation/parallel-compilation.d.ts

@@ -9,7 +9,7 @@ import type { CompilerOptions } from '@angular/compiler-cli';
 import type { PartialMessage } from 'esbuild';
 import type { SourceFile } from 'typescript';
 import type { AngularHostOptions } from '../angular-host';
-import { AngularCompilation, EmitFileResult } from './angular-compilation';
+import { AngularCompilation, DiagnosticModes, EmitFileResult } from './angular-compilation';
 /**
  * An Angular compilation which uses a Node.js Worker thread to load and execute
  * the TypeScript and Angular compilers. This allows for longer synchronous actions
@@ -32,7 +32,7 @@ export declare class ParallelCompilation extends AngularCompilation {
      * with the serializable esbuild compatible diagnostics.
      */
     protected collectDiagnostics(): never;
-    diagnoseFiles(): Promise<{
+    diagnoseFiles(modes?: DiagnosticModes): Promise<{
         errors?: PartialMessage[];
         warnings?: PartialMessage[];
     }>;

package/src/tools/esbuild/angular/compilation/parallel-compilation.js

@@ -106,8 +106,8 @@ class ParallelCompilation extends angular_compilation_1.AngularCompilation {
     collectDiagnostics() {
         throw new Error('Not implemented in ParallelCompilation.');
     }
-    diagnoseFiles() {
-        return this.#worker.run(undefined, { name: 'diagnose' });
+    diagnoseFiles(modes = angular_compilation_1.DiagnosticModes.All) {
+        return this.#worker.run(modes, { name: 'diagnose' });
     }
     emitAffectedFiles() {
         return this.#worker.run(undefined, { name: 'emit' });

package/src/tools/esbuild/angular/compilation/parallel-worker.d.ts

@@ -10,6 +10,7 @@
 /// <reference types="@types/node/ts4.8/worker_threads" />
 import type { PartialMessage } from 'esbuild';
 import { type MessagePort } from 'node:worker_threads';
+import type { DiagnosticModes } from './angular-compilation';
 export interface InitRequest {
     jit: boolean;
     tsconfig: string;
@@ -26,7 +27,7 @@ export declare function initialize(request: InitRequest): Promise<{
         allowJs: boolean | undefined;
     };
 }>;
-export declare function diagnose(): Promise<{
+export declare function diagnose(modes: DiagnosticModes): Promise<{
     errors?: PartialMessage[];
     warnings?: PartialMessage[];
 }>;

package/src/tools/esbuild/angular/compilation/parallel-worker.js

@@ -72,9 +72,9 @@ async function initialize(request) {
     };
 }
 exports.initialize = initialize;
-async function diagnose() {
+async function diagnose(modes) {
     (0, node_assert_1.default)(compilation);
-    const diagnostics = await compilation.diagnoseFiles();
+    const diagnostics = await compilation.diagnoseFiles(modes);
     return diagnostics;
 }
 exports.diagnose = diagnose;

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

@@ -195,13 +195,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     hasCompilationErrors = await sharedTSCompilationState.waitUntilReady;
                     return result;
                 }
-                const diagnostics = await compilation.diagnoseFiles();
-                if (diagnostics.errors?.length) {
-                    (result.errors ??= []).push(...diagnostics.errors);
-                }
-                if (diagnostics.warnings?.length) {
-                    (result.warnings ??= []).push(...diagnostics.warnings);
-                }
                 // Update TypeScript file output cache for all affected files
                 try {
                     await (0, profiling_1.profileAsync)('NG_EMIT_TS', async () => {
@@ -222,6 +215,13 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         ],
                     });
                 }
+                const diagnostics = await compilation.diagnoseFiles(environment_options_1.useTypeChecking ? compilation_1.DiagnosticModes.All : compilation_1.DiagnosticModes.All & ~compilation_1.DiagnosticModes.Semantic);
+                if (diagnostics.errors?.length) {
+                    (result.errors ??= []).push(...diagnostics.errors);
+                }
+                if (diagnostics.warnings?.length) {
+                    (result.warnings ??= []).push(...diagnostics.warnings);
+                }
                 // Add errors from failed additional results.
                 // This must be done after emit to capture latest web worker results.
                 for (const { errors } of additionalResults.values()) {

package/src/tools/esbuild/angular/component-stylesheets.js

@@ -110,18 +110,20 @@ class ComponentStylesheetBundler {
         if (!result.errors) {
             for (const outputFile of result.outputFiles) {
                 const filename = node_path_1.default.basename(outputFile.path);
-                // Needed for Bazel as otherwise the files will not be written in the correct place.
-                outputFile.path = node_path_1.default.join(this.options.workspaceRoot, outputFile.path);
-                if (outputFile.type === bundler_context_1.BuildOutputFileType.Media) {
-                    // The output files could also contain resources (images/fonts/etc.) that were referenced
-                    outputFiles.push(outputFile);
+                if (outputFile.type === bundler_context_1.BuildOutputFileType.Media || filename.endsWith('.css.map')) {
+                    // The output files could also contain resources (images/fonts/etc.) that were referenced and the map files.
+                    // Clone the output file to avoid amending the original path which would causes problems during rebuild.
+                    const clonedOutputFile = outputFile.clone();
+                    // Needed for Bazel as otherwise the files will not be written in the correct place,
+                    // this is because esbuild will resolve the output file from the outdir which is currently set to `workspaceRoot` twice,
+                    // once in the stylesheet and the other in the application code bundler.
+                    // Ex: `../../../../../app.component.css.map`.
+                    clonedOutputFile.path = node_path_1.default.join(this.options.workspaceRoot, outputFile.path);
+                    outputFiles.push(clonedOutputFile);
                 }
                 else if (filename.endsWith('.css')) {
                     contents = outputFile.text;
                 }
-                else if (filename.endsWith('.css.map')) {
-                    outputFiles.push(outputFile);
-                }
                 else {
                     throw new Error(`Unexpected non CSS/Media file "${filename}" outputted during component stylesheet processing.`);
                 }

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

@@ -18,6 +18,7 @@ const node_path_1 = require("node:path");
 const environment_options_1 = require("../../utils/environment-options");
 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 rxjs_esm_resolution_plugin_1 = require("./rxjs-esm-resolution-plugin");
 const sourcemap_ignorelist_plugin_1 = require("./sourcemap-ignorelist-plugin");
@@ -47,12 +48,20 @@ function createBrowserCodeBundleOptions(options, target, sourceFileCache) {
             styleOptions),
         ],
     };
-    if (options.externalPackages) {
-        buildOptions.packages = 'external';
-    }
     if (options.plugins) {
         buildOptions.plugins?.push(...options.plugins);
     }
+    if (options.externalPackages) {
+        // Package files affected by a customized loader should not be implicitly marked as external
+        if (options.loaderExtensions || options.plugins) {
+            // Plugin must be added after custom plugins to ensure any added loader options are considered
+            buildOptions.plugins?.push((0, external_packages_plugin_1.createExternalPackagesPlugin)());
+        }
+        else {
+            // Safe to use the packages external option directly
+            buildOptions.packages = 'external';
+        }
+    }
     return buildOptions;
 }
 exports.createBrowserCodeBundleOptions = createBrowserCodeBundleOptions;

package/src/tools/esbuild/bundler-context.js

@@ -177,10 +177,12 @@ class BundlerContext {
             if (this.incremental) {
                 // When incremental always add any files from the load result cache
                 if (this.#loadCache) {
-                    this.#loadCache.watchFiles
-                        .filter((file) => !isInternalAngularFile(file))
-                        // watch files are fully resolved paths
-                        .forEach((file) => this.watchFiles.add(file));
+                    for (const file of this.#loadCache.watchFiles) {
+                        if (!isInternalAngularFile(file)) {
+                            // watch files are fully resolved paths
+                            this.watchFiles.add(file);
+                        }
+                    }
                 }
             }
         }
@@ -189,10 +191,12 @@ class BundlerContext {
         // currently enabled with watch mode where watch files are needed.
         if (this.incremental) {
             // Add input files except virtual angular files which do not exist on disk
-            Object.keys(result.metafile.inputs)
-                .filter((input) => !isInternalAngularFile(input))
-                // input file paths are always relative to the workspace root
-                .forEach((input) => this.watchFiles.add((0, node_path_1.join)(this.workspaceRoot, input)));
+            for (const input of Object.keys(result.metafile.inputs)) {
+                if (!isInternalAngularFile(input)) {
+                    // input file paths are always relative to the workspace root
+                    this.watchFiles.add((0, node_path_1.join)(this.workspaceRoot, input));
+                }
+            }
         }
         // Return if the build encountered any errors
         if (result.errors.length) {

package/src/tools/esbuild/external-packages-plugin.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 a plugin that marks any resolved path as external if it is within a node modules directory.
+ * This is used instead of the esbuild `packages` option to avoid marking files that should be loaded
+ * via customized loaders. This is necessary to prevent Vite development server pre-bundling errors.
+ *
+ * @returns An esbuild plugin.
+ */
+export declare function createExternalPackagesPlugin(): Plugin;

package/src/tools/esbuild/external-packages-plugin.js

@@ -0,0 +1,66 @@
+"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.createExternalPackagesPlugin = void 0;
+const node_path_1 = require("node:path");
+const EXTERNAL_PACKAGE_RESOLUTION = Symbol('EXTERNAL_PACKAGE_RESOLUTION');
+/**
+ * Creates a plugin that marks any resolved path as external if it is within a node modules directory.
+ * This is used instead of the esbuild `packages` option to avoid marking files that should be loaded
+ * via customized loaders. This is necessary to prevent Vite development server pre-bundling errors.
+ *
+ * @returns An esbuild plugin.
+ */
+function createExternalPackagesPlugin() {
+    return {
+        name: 'angular-external-packages',
+        setup(build) {
+            // Safe to use native packages external option if no loader options present
+            if (build.initialOptions.loader === undefined ||
+                Object.keys(build.initialOptions.loader).length === 0) {
+                build.initialOptions.packages = 'external';
+                return;
+            }
+            const loaderFileExtensions = new Set(Object.keys(build.initialOptions.loader));
+            // Only attempt resolve of non-relative and non-absolute paths
+            build.onResolve({ filter: /^[^./]/ }, async (args) => {
+                if (args.pluginData?.[EXTERNAL_PACKAGE_RESOLUTION]) {
+                    return null;
+                }
+                const { importer, kind, resolveDir, namespace, pluginData = {} } = args;
+                pluginData[EXTERNAL_PACKAGE_RESOLUTION] = true;
+                const result = await build.resolve(args.path, {
+                    importer,
+                    kind,
+                    namespace,
+                    pluginData,
+                    resolveDir,
+                });
+                // Return result if unable to resolve or explicitly marked external (externalDependencies option)
+                if (!result.path || result.external) {
+                    return result;
+                }
+                // Allow customized loaders to run against configured paths regardless of location
+                if (loaderFileExtensions.has((0, node_path_1.extname)(result.path))) {
+                    return result;
+                }
+                // Mark paths from a node modules directory as external
+                if (/[\\/]node_modules[\\/]/.test(result.path)) {
+                    return {
+                        path: args.path,
+                        external: true,
+                    };
+                }
+                // Otherwise return original result
+                return result;
+            });
+        },
+    };
+}
+exports.createExternalPackagesPlugin = createExternalPackagesPlugin;

package/src/tools/esbuild/stylesheets/css-resource-plugin.js

@@ -11,6 +11,7 @@ exports.createCssResourcePlugin = void 0;
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const load_result_cache_1 = require("../load-result-cache");
+const CSS_RESOURCE_NAMESPACE = 'angular:css-resource';
 /**
  * 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.
@@ -89,10 +90,10 @@ function createCssResourcePlugin(cache) {
                     // Use a relative path to prevent fully resolved paths in the metafile (JSON stats file).
                     // This is only necessary for custom namespaces. esbuild will handle the file namespace.
                     path: (0, node_path_1.relative)(build.initialOptions.absWorkingDir ?? '', result.path),
-                    namespace: 'css-resource',
+                    namespace: CSS_RESOURCE_NAMESPACE,
                 };
             });
-            build.onLoad({ filter: /./, namespace: 'css-resource' }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
+            build.onLoad({ filter: /./, namespace: CSS_RESOURCE_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
                 const resourcePath = (0, node_path_1.join)(build.initialOptions.absWorkingDir ?? '', args.path);
                 return {
                     contents: await (0, promises_1.readFile)(resourcePath),

package/src/tools/vite/angular-memory-plugin.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 { Connect, Plugin } from 'vite';
+export interface AngularMemoryPluginOptions {
+    workspaceRoot: string;
+    virtualProjectRoot: string;
+    outputFiles: Map<string, {
+        contents: Uint8Array;
+        servable: boolean;
+    }>;
+    assets: Map<string, string>;
+    ssr: boolean;
+    external?: string[];
+    extensionMiddleware?: Connect.NextHandleFunction[];
+    extraHeaders?: Record<string, string>;
+    indexHtmlTransformer?: (content: string) => Promise<string>;
+    normalizePath: (path: string) => string;
+}
+export declare function createAngularMemoryPlugin(options: AngularMemoryPluginOptions): Plugin;