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

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.1.1",
+  "version": "17.2.0-next.0",
   "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.1701.1",
-    "@angular-devkit/build-webpack": "0.1701.1",
-    "@angular-devkit/core": "17.1.1",
+    "@angular-devkit/architect": "0.1702.0-next.0",
+    "@angular-devkit/build-webpack": "0.1702.0-next.0",
+    "@angular-devkit/core": "17.2.0-next.0",
     "@babel/core": "7.23.7",
     "@babel/generator": "7.23.6",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -17,52 +17,52 @@
     "@babel/plugin-transform-async-generator-functions": "7.23.7",
     "@babel/plugin-transform-async-to-generator": "7.23.3",
     "@babel/plugin-transform-runtime": "7.23.7",
-    "@babel/preset-env": "7.23.7",
-    "@babel/runtime": "7.23.7",
+    "@babel/preset-env": "7.23.8",
+    "@babel/runtime": "7.23.8",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.1.1",
-    "@vitejs/plugin-basic-ssl": "1.0.2",
+    "@ngtools/webpack": "17.2.0-next.0",
+    "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
-    "autoprefixer": "10.4.16",
+    "autoprefixer": "10.4.17",
     "babel-loader": "9.1.3",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.21.5",
-    "copy-webpack-plugin": "11.0.0",
+    "copy-webpack-plugin": "12.0.2",
     "critters": "0.0.20",
-    "css-loader": "6.8.1",
-    "esbuild-wasm": "0.19.11",
+    "css-loader": "6.9.1",
+    "esbuild-wasm": "0.19.12",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.2",
     "http-proxy-middleware": "2.0.6",
     "inquirer": "9.2.12",
-    "jsonc-parser": "3.2.0",
+    "jsonc-parser": "3.2.1",
     "karma-source-map-support": "1.4.0",
     "less": "4.2.0",
     "less-loader": "11.1.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.2.1",
     "magic-string": "0.30.5",
-    "mini-css-extract-plugin": "2.7.6",
+    "mini-css-extract-plugin": "2.7.7",
     "mrmime": "2.0.0",
     "open": "8.4.2",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "3.0.1",
-    "piscina": "4.2.1",
+    "piscina": "4.3.0",
     "postcss": "8.4.33",
-    "postcss-loader": "7.3.4",
+    "postcss-loader": "8.0.0",
     "resolve-url-loader": "5.0.0",
     "rxjs": "7.8.1",
-    "sass": "1.69.7",
-    "sass-loader": "13.3.3",
+    "sass": "1.70.0",
+    "sass-loader": "14.0.0",
     "semver": "7.5.4",
     "source-map-loader": "5.0.0",
     "source-map-support": "0.5.21",
-    "terser": "5.26.0",
+    "terser": "5.27.0",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
-    "undici": "6.2.1",
+    "undici": "6.4.0",
     "vite": "5.0.12",
     "watchpack": "2.4.0",
     "webpack": "5.89.0",
@@ -72,19 +72,19 @@
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.19.11"
+    "esbuild": "0.19.12"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/localize": "^17.0.0",
-    "@angular/platform-server": "^17.0.0",
-    "@angular/service-worker": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.0 || ^17.2.0-next.0",
+    "@angular/localize": "^17.0.0 || ^17.2.0-next.0",
+    "@angular/platform-server": "^17.0.0 || ^17.2.0-next.0",
+    "@angular/service-worker": "^17.0.0 || ^17.2.0-next.0",
     "@web/test-runner": "^0.18.0",
     "browser-sync": "^3.0.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "karma": "^6.3.0",
-    "ng-packagr": "^17.0.0",
+    "ng-packagr": "^17.0.0 || ^17.2.0-next.0",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
     "typescript": ">=5.2 <5.4"

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

@@ -29,8 +29,9 @@ async function normalizeOptions(context, projectName, options) {
     const projectMetadata = await context.getProjectMetadata(projectName);
     const projectRoot = node_path_1.default.join(workspaceRoot, projectMetadata.root ?? '');
     const cacheOptions = (0, normalize_cache_1.normalizeCacheOptions)(projectMetadata, workspaceRoot);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const buildTarget = (0, architect_1.targetFromTargetString)(options.buildTarget ?? options.browserTarget);
+    // Target specifier defaults to the current project's build target using a development configuration
+    const buildTargetSpecifier = options.buildTarget ?? options.browserTarget ?? `::development`;
+    const buildTarget = (0, architect_1.targetFromTargetString)(buildTargetSpecifier, projectName, 'build');
     // Initial options to keep
     const { host, port, poll, open, verbose, watch, allowedHosts, disableHostCheck, liveReload, hmr, headers, proxyConfig, servePath, publicHost, ssl, sslCert, sslKey, forceEsbuild, } = options;
     // Return all the normalized options

package/src/builders/dev-server/schema.json

@@ -13,7 +13,7 @@
     "buildTarget": {
       "type": "string",
       "description": "A build builder target to serve in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
-      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
+      "pattern": "^[^:\\s]*:[^:\\s]*(:[^\\s]+)?$"
     },
     "port": {
       "type": "number",

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

@@ -341,7 +341,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         publicDir: false,
         esbuild: false,
         mode: 'development',
-        appType: 'spa',
+        appType: 'mpa',
         css: {
             devSourcemap: true,
         },

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

@@ -30,8 +30,9 @@ async function normalizeOptions(context, projectName, options) {
     const workspaceRoot = context.workspaceRoot;
     const projectMetadata = await context.getProjectMetadata(projectName);
     const projectRoot = node_path_1.default.join(workspaceRoot, projectMetadata.root ?? '');
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const buildTarget = (0, architect_1.targetFromTargetString)(options.buildTarget ?? options.browserTarget);
+    // Target specifier defaults to the current project's build target with no specified configuration
+    const buildTargetSpecifier = options.buildTarget ?? options.browserTarget ?? ':';
+    const buildTarget = (0, architect_1.targetFromTargetString)(buildTargetSpecifier, projectName, 'build');
     const i18nOptions = (0, i18n_options_1.createI18nOptions)(projectMetadata);
     // Normalize xliff format extensions
     let format = options.format;

package/src/builders/extract-i18n/schema.json

@@ -13,7 +13,7 @@
     "buildTarget": {
       "type": "string",
       "description": "A builder target to extract i18n messages in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
-      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
+      "pattern": "^[^:\\s]*:[^:\\s]*(:[^\\s]+)?$"
     },
     "format": {
       "type": "string",

package/src/builders/jest/index.js

@@ -31,15 +31,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const architect_1 = require("@angular-devkit/architect");
-const child_process_1 = require("child_process");
-const path = __importStar(require("path"));
-const util_1 = require("util");
+const node_child_process_1 = require("node:child_process");
+const fs = __importStar(require("node:fs/promises"));
+const path = __importStar(require("node:path"));
+const node_util_1 = require("node:util");
 const color_1 = require("../../utils/color");
 const test_files_1 = require("../../utils/test-files");
 const application_1 = require("../application");
 const schema_1 = require("../browser-esbuild/schema");
 const options_1 = require("./options");
-const execFile = (0, util_1.promisify)(child_process_1.execFile);
+const execFile = (0, node_util_1.promisify)(node_child_process_1.execFile);
 /** Main execution function for the Jest builder. */
 exports.default = (0, architect_1.createBuilder)(async (schema, context) => {
     context.logger.warn('NOTE: The Jest builder is currently EXPERIMENTAL and not ready for production use.');
@@ -65,8 +66,21 @@ exports.default = (0, architect_1.createBuilder)(async (schema, context) => {
             error: '`jest-environment-jsdom` is not installed. Install it with `npm install jest-environment-jsdom --save-dev`.',
         };
     }
+    const [testFiles, customConfig] = await Promise.all([
+        (0, test_files_1.findTestFiles)(options.include, options.exclude, context.workspaceRoot),
+        findCustomJestConfig(context.workspaceRoot),
+    ]);
+    // Warn if a custom Jest configuration is found. We won't use it, so if a developer is trying to use a custom config, this hopefully
+    // makes a better experience than silently ignoring the configuration.
+    // Ideally, this would be a hard error. However a Jest config could exist for testing other files in the workspace outside of Angular
+    // CLI, so we likely can't produce a hard error in this situation without an opt-out.
+    if (customConfig) {
+        context.logger.warn('A custom Jest config was found, but this is not supported by `@angular-devkit/build-angular:jest` and will be' +
+            ` ignored: ${customConfig}. This is an experiment to see if completely abstracting away Jest's configuration is viable. Please` +
+            ` consider if your use case can be met without directly modifying the Jest config. If this is a major obstacle for your use` +
+            ` case, please post it in this issue so we can collect feedback and evaluate: https://github.com/angular/angular-cli/issues/25434.`);
+    }
     // Build all the test files.
-    const testFiles = await (0, test_files_1.findTestFiles)(options.include, options.exclude, context.workspaceRoot);
     const jestGlobal = path.join(__dirname, 'jest-global.mjs');
     const initTestBed = path.join(__dirname, 'init-test-bed.mjs');
     const buildResult = await build(context, {
@@ -94,6 +108,7 @@ exports.default = (0, architect_1.createBuilder)(async (schema, context) => {
         '--experimental-vm-modules',
         jest,
         `--rootDir="${path.join(testOut, 'browser')}"`,
+        `--config=${path.join(__dirname, 'jest.config.mjs')}`,
         '--testEnvironment=jsdom',
         // TODO(dgp1130): Enable cache once we have a mechanism for properly clearing / disabling it.
         '--no-cache',
@@ -158,3 +173,27 @@ function resolveModule(module) {
         return undefined;
     }
 }
+/** Returns whether or not the provided directory includes a Jest configuration file. */
+async function findCustomJestConfig(dir) {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+    // Jest supports many file extensions (`js`, `ts`, `cjs`, `cts`, `json`, etc.) Just look
+    // for anything with that prefix.
+    const config = entries.find((entry) => entry.isFile() && entry.name.startsWith('jest.config.'));
+    if (config) {
+        return path.join(dir, config.name);
+    }
+    // Jest also supports a `jest` key in `package.json`, look for a config there.
+    const packageJsonPath = path.join(dir, 'package.json');
+    let packageJson;
+    try {
+        packageJson = await fs.readFile(packageJsonPath, 'utf8');
+    }
+    catch {
+        return undefined; // No package.json, therefore no Jest configuration in it.
+    }
+    const json = JSON.parse(packageJson);
+    if ('jest' in json) {
+        return packageJsonPath;
+    }
+    return undefined;
+}

package/src/builders/jest/jest.config.mjs

@@ -0,0 +1,11 @@
+/**
+ * @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
+ */
+
+// Empty config file, everything is specified via CLI options right now.
+// This file is used just so Jest doesn't accidentally inherit a custom user-specified Jest config.
+export default {};

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

@@ -14,6 +14,13 @@ export interface EmitFileResult {
     contents: string;
     dependencies?: readonly string[];
 }
+export declare enum DiagnosticModes {
+    None = 0,
+    Option = 1,
+    Syntactic = 2,
+    Semantic = 4,
+    All = 7
+}
 export declare abstract class AngularCompilation {
     #private;
     static loadCompilerCli(): Promise<typeof ng>;
@@ -25,8 +32,8 @@ export declare abstract class AngularCompilation {
         referencedFiles: readonly string[];
     }>;
     abstract emitAffectedFiles(): Iterable<EmitFileResult> | Promise<Iterable<EmitFileResult>>;
-    protected abstract collectDiagnostics(): Iterable<ts.Diagnostic> | Promise<Iterable<ts.Diagnostic>>;
-    diagnoseFiles(): Promise<{
+    protected abstract collectDiagnostics(modes: DiagnosticModes): Iterable<ts.Diagnostic> | Promise<Iterable<ts.Diagnostic>>;
+    diagnoseFiles(modes?: DiagnosticModes): Promise<{
         errors?: PartialMessage[];
         warnings?: PartialMessage[];
     }>;

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

@@ -30,10 +30,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AngularCompilation = void 0;
+exports.AngularCompilation = exports.DiagnosticModes = void 0;
 const load_esm_1 = require("../../../../utils/load-esm");
 const profiling_1 = require("../../profiling");
 const diagnostics_1 = require("../diagnostics");
+var DiagnosticModes;
+(function (DiagnosticModes) {
+    DiagnosticModes[DiagnosticModes["None"] = 0] = "None";
+    DiagnosticModes[DiagnosticModes["Option"] = 1] = "Option";
+    DiagnosticModes[DiagnosticModes["Syntactic"] = 2] = "Syntactic";
+    DiagnosticModes[DiagnosticModes["Semantic"] = 4] = "Semantic";
+    DiagnosticModes[DiagnosticModes["All"] = 7] = "All";
+})(DiagnosticModes || (exports.DiagnosticModes = DiagnosticModes = {}));
 class AngularCompilation {
     static #angularCompilerCliModule;
     static #typescriptModule;
@@ -64,13 +72,13 @@ class AngularCompilation {
             supportJitMode: false,
         }));
     }
-    async diagnoseFiles() {
+    async diagnoseFiles(modes = DiagnosticModes.All) {
         const result = {};
         // Avoid loading typescript until actually needed.
         // This allows for avoiding the load of typescript in the main thread when using the parallel compilation.
         const typescript = await AngularCompilation.loadTypescript();
         await (0, profiling_1.profileAsync)('NG_DIAGNOSTICS_TOTAL', async () => {
-            for (const diagnostic of await this.collectDiagnostics()) {
+            for (const diagnostic of await this.collectDiagnostics(modes)) {
                 const message = (0, diagnostics_1.convertTypeScriptDiagnostic)(typescript, diagnostic);
                 if (diagnostic.category === typescript.DiagnosticCategory.Error) {
                     (result.errors ??= []).push(message);

package/src/tools/esbuild/angular/compilation/aot-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 AotCompilation extends AngularCompilation {
     #private;
     initialize(tsconfig: string, hostOptions: AngularHostOptions, compilerOptionsTransformer?: (compilerOptions: ng.CompilerOptions) => ng.CompilerOptions): Promise<{
@@ -16,6 +16,6 @@ export declare class AotCompilation 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/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/vite/angular-memory-plugin.js

@@ -61,6 +61,7 @@ function createAngularMemoryPlugin(options) {
                 map: mapContents && Buffer.from(mapContents).toString('utf-8'),
             };
         },
+        // eslint-disable-next-line max-lines-per-function
         configureServer(server) {
             const originalssrTransform = server.ssrTransform;
             server.ssrTransform = async (code, map, url, originalCode) => {
@@ -124,14 +125,15 @@ function createAngularMemoryPlugin(options) {
             // Returning a function, installs middleware after the main transform middleware but
             // before the built-in HTML middleware
             return () => {
+                server.middlewares.use(angularHtmlFallbackMiddleware);
                 function angularSSRMiddleware(req, res, next) {
                     const url = req.originalUrl;
                     if (!req.url ||
                         // Skip if path is not defined.
                         !url ||
                         // Skip if path is like a file.
-                        // NOTE: We use a regexp to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
-                        /^\.[a-z]{2,4}$/i.test((0, node_path_1.extname)(url.split('?')[0]))) {
+                        // NOTE: We use a mime type lookup to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
+                        lookupMimeTypeFromRequest(url)) {
                         next();
                         return;
                     }
@@ -212,12 +214,13 @@ exports.createAngularMemoryPlugin = createAngularMemoryPlugin;
  */
 async function loadViteClientCode(file) {
     const originalContents = await (0, promises_1.readFile)(file, 'utf-8');
-    let contents = originalContents.replace('You can also disable this overlay by setting', '');
-    contents = contents.replace(
+    const firstUpdate = originalContents.replace('You can also disable this overlay by setting', '');
+    (0, node_assert_1.default)(originalContents !== firstUpdate, 'Failed to update Vite client error overlay text. (1)');
+    const secondUpdate = firstUpdate.replace(
     // eslint-disable-next-line max-len
-    '<code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>', '');
-    (0, node_assert_1.default)(originalContents !== contents, 'Failed to update Vite client error overlay text.');
-    return contents;
+    '<code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">${hmrConfigName}.</code>', '');
+    (0, node_assert_1.default)(firstUpdate !== secondUpdate, 'Failed to update Vite client error overlay text. (2)');
+    return secondUpdate;
 }
 function pathnameWithoutBasePath(url, basePath) {
     const parsedUrl = new URL(url, 'http://localhost');
@@ -227,3 +230,23 @@ function pathnameWithoutBasePath(url, basePath) {
         ? pathname.slice(basePath.length - 1)
         : pathname;
 }
+function angularHtmlFallbackMiddleware(req, res, next) {
+    // Similar to how it is handled in vite
+    // https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/middlewares/htmlFallback.ts#L15C19-L15C45
+    if ((req.method === 'GET' || req.method === 'HEAD') &&
+        (!req.url || !lookupMimeTypeFromRequest(req.url)) &&
+        (!req.headers.accept ||
+            req.headers.accept.includes('text/html') ||
+            req.headers.accept.includes('text/*') ||
+            req.headers.accept.includes('*/*'))) {
+        req.url = '/index.html';
+    }
+    next();
+}
+function lookupMimeTypeFromRequest(url) {
+    const extension = (0, node_path_1.extname)(url.split('?')[0]);
+    if (extension === '.ico') {
+        return 'image/x-icon';
+    }
+    return extension && (0, mrmime_1.lookup)(extension);
+}

package/src/utils/environment-options.d.ts

@@ -13,3 +13,4 @@ export declare const useParallelTs: boolean;
 export declare const useLegacySass: boolean;
 export declare const debugPerformance: boolean;
 export declare const shouldWatchRoot: boolean;
+export declare const useTypeChecking: boolean;

package/src/utils/environment-options.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldWatchRoot = exports.debugPerformance = exports.useLegacySass = exports.useParallelTs = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
+exports.useTypeChecking = exports.shouldWatchRoot = exports.debugPerformance = exports.useLegacySass = exports.useParallelTs = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
 const color_1 = require("./color");
 function isDisabled(variable) {
     return variable === '0' || variable.toLowerCase() === 'false';
@@ -83,3 +83,5 @@ const debugPerfVariable = process.env['NG_BUILD_DEBUG_PERF'];
 exports.debugPerformance = isPresent(debugPerfVariable) && isEnabled(debugPerfVariable);
 const watchRootVariable = process.env['NG_BUILD_WATCH_ROOT'];
 exports.shouldWatchRoot = isPresent(watchRootVariable) && isEnabled(watchRootVariable);
+const typeCheckingVariable = process.env['NG_BUILD_TYPE_CHECK'];
+exports.useTypeChecking = !isPresent(typeCheckingVariable) || !isDisabled(typeCheckingVariable);