@angular-devkit/build-angular 15.0.0-next.4 → 15.0.0-next.6

package/src/builders/browser-esbuild/compiler-plugin.js

@@ -43,6 +43,7 @@ const typescript_1 = __importDefault(require("typescript"));
 const application_1 = __importDefault(require("../../babel/presets/application"));
 const webpack_loader_1 = require("../../babel/webpack-loader");
 const load_esm_1 = require("../../utils/load-esm");
+const profiling_1 = require("./profiling");
 const stylesheets_1 = require("./stylesheets");
 /**
  * Converts TypeScript Diagnostic related information into an esbuild compatible note object.
@@ -113,10 +114,12 @@ class SourceFileCache extends Map {
     constructor() {
         super(...arguments);
         this.modifiedFiles = new Set();
+        this.babelFileCache = new Map();
     }
     invalidate(files) {
         this.modifiedFiles.clear();
         for (let file of files) {
+            this.babelFileCache.delete(file);
             // Normalize separators to allow matching TypeScript Host paths
             if (USING_WINDOWS) {
                 file = file.replace(WINDOWS_SEP_REGEXP, path.posix.sep);
@@ -136,14 +139,15 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
         async setup(build) {
             var _a, _b;
             var _c;
+            let setupWarnings;
             // This uses a wrapped dynamic import to load `@angular/compiler-cli` which is ESM.
             // Once TypeScript provides support for retaining dynamic imports this workaround can be dropped.
-            const compilerCli = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli');
+            const { GLOBAL_DEFS_FOR_TERSER_WITH_AOT, NgtscProgram, OptimizeFor, readConfiguration } = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli');
             // Temporary deep import for transformer support
             const { mergeTransformers, replaceBootstrap, } = require('@ngtools/webpack/src/ivy/transformation');
             // Setup defines based on the values provided by the Angular compiler-cli
             (_a = (_c = build.initialOptions).define) !== null && _a !== void 0 ? _a : (_c.define = {});
-            for (const [key, value] of Object.entries(compilerCli.GLOBAL_DEFS_FOR_TERSER_WITH_AOT)) {
+            for (const [key, value] of Object.entries(GLOBAL_DEFS_FOR_TERSER_WITH_AOT)) {
                 if (key in build.initialOptions.define) {
                     // Skip keys that have been manually provided
                     continue;
@@ -154,7 +158,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             }
             // The tsconfig is loaded in setup instead of in start to allow the esbuild target build option to be modified.
             // esbuild build options can only be modified in setup prior to starting the build.
-            const { options: compilerOptions, rootNames, errors: configurationDiagnostics, } = compilerCli.readConfiguration(pluginOptions.tsconfig, {
+            const { options: compilerOptions, rootNames, errors: configurationDiagnostics, } = (0, profiling_1.profileSync)('NG_READ_CONFIG', () => readConfiguration(pluginOptions.tsconfig, {
                 noEmitOnError: false,
                 suppressOutputPathCheck: true,
                 outDir: undefined,
@@ -168,14 +172,24 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 allowEmptyCodegenFiles: false,
                 annotationsAs: 'decorators',
                 enableResourceInlining: false,
-            });
+            }));
             if (compilerOptions.target === undefined || compilerOptions.target < typescript_1.default.ScriptTarget.ES2022) {
                 // If 'useDefineForClassFields' is already defined in the users project leave the value as is.
                 // Otherwise fallback to false due to https://github.com/microsoft/TypeScript/issues/45995
                 // which breaks the deprecated `@Effects` NGRX decorator and potentially other existing code as well.
                 compilerOptions.target = typescript_1.default.ScriptTarget.ES2022;
                 (_b = compilerOptions.useDefineForClassFields) !== null && _b !== void 0 ? _b : (compilerOptions.useDefineForClassFields = false);
-                // TODO: show warning about this override when we have access to the logger.
+                (setupWarnings !== null && setupWarnings !== void 0 ? setupWarnings : (setupWarnings = [])).push({
+                    text: 'TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and ' +
+                        '"false" respectively by the Angular CLI.',
+                    location: { file: pluginOptions.tsconfig },
+                    notes: [
+                        {
+                            text: `To control ECMA version and features use the Browerslist configuration. ' +
+              'For more information, see https://github.com/browserslist/browserslist#queries'`,
+                        },
+                    ],
+                });
             }
             // The file emitter created during `onStart` that will be used during the build in `onLoad` callbacks for TS files
             let fileEmitter;
@@ -183,10 +197,16 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             let stylesheetResourceFiles;
             let previousBuilder;
             let previousAngularProgram;
-            const babelMemoryCache = new Map();
+            const babelDataCache = new Map();
+            const diagnosticCache = new WeakMap();
             build.onStart(async () => {
-                var _a, _b;
-                const result = {};
+                const result = {
+                    warnings: setupWarnings,
+                };
+                // Reset the setup warnings so that they are only shown during the first build.
+                setupWarnings = undefined;
+                // Reset debug performance tracking
+                (0, profiling_1.resetCumulativeDurations)();
                 // Reset stylesheet resource output files
                 stylesheetResourceFiles = [];
                 // Create TypeScript compiler host
@@ -241,15 +261,14 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     };
                 }
                 // Create the Angular specific program that contains the Angular compiler
-                const angularProgram = new compilerCli.NgtscProgram(rootNames, compilerOptions, host, previousAngularProgram);
+                const angularProgram = (0, profiling_1.profileSync)('NG_CREATE_PROGRAM', () => new NgtscProgram(rootNames, compilerOptions, host, previousAngularProgram));
                 previousAngularProgram = angularProgram;
                 const angularCompiler = angularProgram.compiler;
-                const { ignoreForDiagnostics } = angularCompiler;
                 const typeScriptProgram = angularProgram.getTsProgram();
                 augmentProgramWithVersioning(typeScriptProgram);
                 const builder = typescript_1.default.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, previousBuilder, configurationDiagnostics);
                 previousBuilder = builder;
-                await angularCompiler.analyzeAsync();
+                await (0, profiling_1.profileAsync)('NG_ANALYZE_PROGRAM', () => angularCompiler.analyzeAsync());
                 function* collectDiagnostics() {
                     // Collect program level diagnostics
                     yield* builder.getConfigFileParsingDiagnostics();
@@ -257,32 +276,49 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     yield* builder.getOptionsDiagnostics();
                     yield* builder.getGlobalDiagnostics();
                     // Collect source file specific diagnostics
-                    const OptimizeFor = compilerCli.OptimizeFor;
+                    const affectedFiles = findAffectedFiles(builder, angularCompiler);
+                    const optimizeFor = affectedFiles.size > 1 ? OptimizeFor.WholeProgram : OptimizeFor.SingleFile;
                     for (const sourceFile of builder.getSourceFiles()) {
-                        if (ignoreForDiagnostics.has(sourceFile)) {
+                        if (angularCompiler.ignoreForDiagnostics.has(sourceFile)) {
                             continue;
                         }
-                        yield* builder.getSyntacticDiagnostics(sourceFile);
-                        yield* builder.getSemanticDiagnostics(sourceFile);
-                        const angularDiagnostics = angularCompiler.getDiagnosticsForFile(sourceFile, OptimizeFor.WholeProgram);
-                        yield* angularDiagnostics;
+                        // 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', () => builder.getSyntacticDiagnostics(sourceFile), true);
+                        yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SEMANTIC', () => builder.getSemanticDiagnostics(sourceFile), true);
+                        // Only request Angular template diagnostics for affected files to avoid
+                        // overhead of template diagnostics for unchanged files.
+                        if (affectedFiles.has(sourceFile)) {
+                            const angularDiagnostics = (0, profiling_1.profileSync)('NG_DIAGNOSTICS_TEMPLATE', () => angularCompiler.getDiagnosticsForFile(sourceFile, optimizeFor), true);
+                            diagnosticCache.set(sourceFile, angularDiagnostics);
+                            yield* angularDiagnostics;
+                        }
+                        else {
+                            const angularDiagnostics = diagnosticCache.get(sourceFile);
+                            if (angularDiagnostics) {
+                                yield* angularDiagnostics;
+                            }
+                        }
                     }
                 }
-                for (const diagnostic of collectDiagnostics()) {
-                    const message = convertTypeScriptDiagnostic(diagnostic, host);
-                    if (diagnostic.category === typescript_1.default.DiagnosticCategory.Error) {
-                        ((_a = result.errors) !== null && _a !== void 0 ? _a : (result.errors = [])).push(message);
-                    }
-                    else {
-                        ((_b = result.warnings) !== null && _b !== void 0 ? _b : (result.warnings = [])).push(message);
+                (0, profiling_1.profileSync)('NG_DIAGNOSTICS_TOTAL', () => {
+                    var _a, _b;
+                    for (const diagnostic of collectDiagnostics()) {
+                        const message = convertTypeScriptDiagnostic(diagnostic, host);
+                        if (diagnostic.category === typescript_1.default.DiagnosticCategory.Error) {
+                            ((_a = result.errors) !== null && _a !== void 0 ? _a : (result.errors = [])).push(message);
+                        }
+                        else {
+                            ((_b = result.warnings) !== null && _b !== void 0 ? _b : (result.warnings = [])).push(message);
+                        }
                     }
-                }
+                });
                 fileEmitter = createFileEmitter(builder, mergeTransformers(angularCompiler.prepareEmit().transformers, {
                     before: [replaceBootstrap(() => builder.getProgram().getTypeChecker())],
-                }), (sourceFile) => angularCompiler.incrementalDriver.recordSuccessfulEmit(sourceFile));
+                }), (sourceFile) => angularCompiler.incrementalCompilation.recordSuccessfulEmit(sourceFile));
                 return result;
             });
-            build.onLoad({ filter: compilerOptions.allowJs ? /\.[cm]?[jt]sx?$/ : /\.[cm]?tsx?$/ }, async (args) => {
+            build.onLoad({ filter: compilerOptions.allowJs ? /\.[cm]?[jt]sx?$/ : /\.[cm]?tsx?$/ }, (args) => (0, profiling_1.profileAsync)('NG_EMIT_TS*', async () => {
                 var _a, _b, _c;
                 assert.ok(fileEmitter, 'Invalid plugin execution order');
                 const typescriptResult = await fileEmitter((_b = (_a = pluginOptions.fileReplacements) === null || _a === void 0 ? void 0 : _a[args.path]) !== null && _b !== void 0 ? _b : args.path);
@@ -306,23 +342,46 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         ],
                     };
                 }
+                const data = (_c = typescriptResult.content) !== null && _c !== void 0 ? _c : '';
+                // The pre-transformed data is 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.
+                let contents = babelDataCache.get(data);
+                if (contents === undefined) {
+                    const transformedData = await transformWithBabel(args.path, data, pluginOptions);
+                    contents = Buffer.from(transformedData, 'utf-8');
+                    babelDataCache.set(data, contents);
+                }
                 return {
-                    contents: await transformWithBabelCached(args.path, (_c = typescriptResult.content) !== null && _c !== void 0 ? _c : '', pluginOptions, babelMemoryCache),
+                    contents,
                     loader: 'js',
                 };
-            });
-            build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
-                const data = await fs_1.promises.readFile(args.path, 'utf-8');
+            }, true));
+            build.onLoad({ filter: /\.[cm]?js$/ }, (args) => (0, profiling_1.profileAsync)('NG_EMIT_JS*', async () => {
+                var _a, _b;
+                // 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 = (_a = pluginOptions.sourceFileCache) === null || _a === void 0 ? void 0 : _a.babelFileCache.get(args.path);
+                if (contents === undefined) {
+                    const data = await fs_1.promises.readFile(args.path, 'utf-8');
+                    const transformedData = await transformWithBabel(args.path, data, pluginOptions);
+                    contents = Buffer.from(transformedData, 'utf-8');
+                    (_b = pluginOptions.sourceFileCache) === null || _b === void 0 ? void 0 : _b.babelFileCache.set(args.path, contents);
+                }
                 return {
-                    contents: await transformWithBabelCached(args.path, data, pluginOptions, babelMemoryCache),
+                    contents,
                     loader: 'js',
                 };
-            });
+            }, true));
             build.onEnd((result) => {
                 var _a;
                 if (stylesheetResourceFiles.length) {
                     (_a = result.outputFiles) === null || _a === void 0 ? void 0 : _a.push(...stylesheetResourceFiles);
                 }
+                (0, profiling_1.logCumulativeDurations)();
             });
         },
     };
@@ -388,25 +447,40 @@ async function transformWithBabel(filename, data, pluginOptions) {
     });
     return (_a = result === null || result === void 0 ? void 0 : result.code) !== null && _a !== void 0 ? _a : data;
 }
-/**
- * Transforms JavaScript file data using the babel transforms setup in transformWithBabel. The
- * supplied cache will be used to avoid repeating the transforms for data that has previously
- * been transformed such as in a previous rebuild cycle.
- * @param filename The file path of the data to be transformed.
- * @param data The file data that will be transformed.
- * @param pluginOptions Compiler plugin options that will be used to control the transformation.
- * @param cache A cache of previously transformed data that will be used to avoid repeat transforms.
- * @returns A promise containing the transformed data.
- */
-async function transformWithBabelCached(filename, data, pluginOptions, cache) {
-    // The pre-transformed data is 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.
-    let result = cache.get(data);
-    if (result === undefined) {
-        result = await transformWithBabel(filename, data, pluginOptions);
-        cache.set(data, result);
+function findAffectedFiles(builder, { ignoreForDiagnostics, ignoreForEmit, incrementalCompilation }) {
+    const affectedFiles = new Set();
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const result = builder.getSemanticDiagnosticsOfNextAffectedFile(undefined, (sourceFile) => {
+            // If the affected file is a TTC shim, add the shim's original source file.
+            // This ensures that changes that affect TTC are typechecked even when the changes
+            // are otherwise unrelated from a TS perspective and do not result in Ivy codegen changes.
+            // For example, changing @Input property types of a directive used in another component's
+            // template.
+            // A TTC shim is a file that has been ignored for diagnostics and has a filename ending in `.ngtypecheck.ts`.
+            if (ignoreForDiagnostics.has(sourceFile) && sourceFile.fileName.endsWith('.ngtypecheck.ts')) {
+                // This file name conversion relies on internal compiler logic and should be converted
+                // to an official method when available. 15 is length of `.ngtypecheck.ts`
+                const originalFilename = sourceFile.fileName.slice(0, -15) + '.ts';
+                const originalSourceFile = builder.getSourceFile(originalFilename);
+                if (originalSourceFile) {
+                    affectedFiles.add(originalSourceFile);
+                }
+                return true;
+            }
+            return false;
+        });
+        if (!result) {
+            break;
+        }
+        affectedFiles.add(result.affected);
     }
-    return result;
+    // A file is also affected if the Angular compiler requires it to be emitted
+    for (const sourceFile of builder.getSourceFiles()) {
+        if (ignoreForEmit.has(sourceFile) || incrementalCompilation.safeToSkipEmit(sourceFile)) {
+            continue;
+        }
+        affectedFiles.add(sourceFile);
+    }
+    return affectedFiles;
 }

package/src/builders/browser-esbuild/index.js

@@ -78,7 +78,7 @@ class ExecutionResult {
 }
 async function execute(options, context, rebuildState) {
     var _a, _b, _c, _d;
-    const startTime = Date.now();
+    const startTime = process.hrtime.bigint();
     const { projectRoot, workspaceRoot, optimizationOptions, outputPath, assets, serviceWorkerOptions, indexHtmlOptions, } = options;
     const target = (0, esbuild_targets_1.transformSupportedBrowsersToTargets)((0, supported_browsers_1.getSupportedBrowsers)(projectRoot, context.logger));
     const codeBundleCache = options.watch
@@ -177,7 +177,8 @@ async function execute(options, context, rebuildState) {
             return new ExecutionResult(false, codeResults.rebuild, codeBundleCache);
         }
     }
-    context.logger.info(`Complete. [${(Date.now() - startTime) / 1000} seconds]`);
+    const buildTime = Number(process.hrtime.bigint() - startTime) / 10 ** 9;
+    context.logger.info(`Complete. [${buildTime.toFixed(3)} seconds]`);
     return new ExecutionResult(true, codeResults.rebuild, codeBundleCache);
 }
 function createOutputFileFromText(path, text) {

package/src/builders/browser-esbuild/profiling.d.ts

@@ -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
+ */
+export declare function resetCumulativeDurations(): void;
+export declare function logCumulativeDurations(): void;
+export declare function profileAsync<T>(name: string, action: () => Promise<T>, cumulative?: boolean): Promise<T>;
+export declare function profileSync<T>(name: string, action: () => T, cumulative?: boolean): T;

package/src/builders/browser-esbuild/profiling.js

@@ -0,0 +1,64 @@
+"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.profileSync = exports.profileAsync = exports.logCumulativeDurations = exports.resetCumulativeDurations = void 0;
+const environment_options_1 = require("../../utils/environment-options");
+let cumulativeDurations;
+function resetCumulativeDurations() {
+    cumulativeDurations === null || cumulativeDurations === void 0 ? void 0 : cumulativeDurations.clear();
+}
+exports.resetCumulativeDurations = resetCumulativeDurations;
+function logCumulativeDurations() {
+    if (!environment_options_1.debugPerformance || !cumulativeDurations) {
+        return;
+    }
+    for (const [name, duration] of cumulativeDurations) {
+        // eslint-disable-next-line no-console
+        console.log(`DURATION[${name}]: ${duration.toFixed(9)} seconds`);
+    }
+}
+exports.logCumulativeDurations = logCumulativeDurations;
+function recordDuration(name, startTime, cumulative) {
+    var _a;
+    const duration = Number(process.hrtime.bigint() - startTime) / 10 ** 9;
+    if (cumulative) {
+        cumulativeDurations !== null && cumulativeDurations !== void 0 ? cumulativeDurations : (cumulativeDurations = new Map());
+        cumulativeDurations.set(name, ((_a = cumulativeDurations.get(name)) !== null && _a !== void 0 ? _a : 0) + duration);
+    }
+    else {
+        // eslint-disable-next-line no-console
+        console.log(`DURATION[${name}]: ${duration.toFixed(9)} seconds`);
+    }
+}
+async function profileAsync(name, action, cumulative) {
+    if (!environment_options_1.debugPerformance) {
+        return action();
+    }
+    const startTime = process.hrtime.bigint();
+    try {
+        return await action();
+    }
+    finally {
+        recordDuration(name, startTime, cumulative);
+    }
+}
+exports.profileAsync = profileAsync;
+function profileSync(name, action, cumulative) {
+    if (!environment_options_1.debugPerformance) {
+        return action();
+    }
+    const startTime = process.hrtime.bigint();
+    try {
+        return action();
+    }
+    finally {
+        recordDuration(name, startTime, cumulative);
+    }
+}
+exports.profileSync = profileSync;

package/src/builders/browser-esbuild/sass-plugin.js

@@ -31,7 +31,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSassPlugin = void 0;
-const url_1 = require("url");
+const node_path_1 = require("node:path");
+const node_url_1 = require("node:url");
 function createSassPlugin(options) {
     return {
         name: 'angular-sass',
@@ -59,14 +60,16 @@ function createSassPlugin(options) {
                     });
                     return {
                         loader: 'css',
-                        contents: sourceMap ? `${css}\n${sourceMapToUrlComment(sourceMap)}` : css,
-                        watchFiles: loadedUrls.map((url) => (0, url_1.fileURLToPath)(url)),
+                        contents: sourceMap
+                            ? `${css}\n${sourceMapToUrlComment(sourceMap, (0, node_path_1.dirname)(args.path))}`
+                            : css,
+                        watchFiles: loadedUrls.map((url) => (0, node_url_1.fileURLToPath)(url)),
                         warnings,
                     };
                 }
                 catch (error) {
                     if (error instanceof sass.Exception) {
-                        const file = error.span.url ? (0, url_1.fileURLToPath)(error.span.url) : undefined;
+                        const file = error.span.url ? (0, node_url_1.fileURLToPath)(error.span.url) : undefined;
                         return {
                             loader: 'css',
                             errors: [
@@ -84,7 +87,10 @@ function createSassPlugin(options) {
     };
 }
 exports.createSassPlugin = createSassPlugin;
-function sourceMapToUrlComment(sourceMap) {
+function sourceMapToUrlComment(sourceMap, root) {
+    // Remove `file` protocol from all sourcemap sources and adjust to be relative to the input file.
+    // This allows esbuild to correctly process the paths.
+    sourceMap.sources = sourceMap.sources.map((source) => (0, node_path_1.relative)(root, (0, node_url_1.fileURLToPath)(source)));
     const urlSourceMap = Buffer.from(JSON.stringify(sourceMap), 'utf-8').toString('base64');
     return `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${urlSourceMap} */`;
 }

package/src/builders/browser-esbuild/schema.json

@@ -141,8 +141,8 @@
     },
     "optimization": {
       "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
-      "x-user-analytics": 16,
       "default": true,
+      "x-user-analytics": "ep.ng_optimization",
       "oneOf": [
         {
           "type": "object",
@@ -224,7 +224,7 @@
     "aot": {
       "type": "boolean",
       "description": "Build using Ahead of Time compilation.",
-      "x-user-analytics": 13,
+      "x-user-analytics": "ep.ng_aot",
       "default": true
     },
     "sourceMap": {

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

@@ -12,6 +12,7 @@ import { Observable } from 'rxjs';
 import webpack from 'webpack';
 import { ExecutionTransformer } from '../../transforms';
 import { IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
+import { BuildEventStats } from '../../webpack/utils/stats';
 import { Schema } from './schema';
 export declare type DevServerBuilderOptions = Schema;
 /**
@@ -19,6 +20,7 @@ export declare type DevServerBuilderOptions = Schema;
  */
 export declare type DevServerBuilderOutput = DevServerBuildOutput & {
     baseUrl: string;
+    stats: BuildEventStats;
 };
 /**
  * Reusable implementation of the Angular Webpack development server builder.

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

@@ -132,12 +132,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         ****************************************************************************************
       `);
         }
-        const { config, projectRoot, i18n } = await (0, webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext)(browserOptions, context, (wco) => [
-            (0, configs_1.getDevServerConfig)(wco),
-            (0, configs_1.getCommonConfig)(wco),
-            (0, configs_1.getStylesConfig)(wco),
-            (0, configs_1.getAnalyticsConfig)(wco, context),
-        ], options);
+        const { config, projectRoot, i18n } = await (0, webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext)(browserOptions, context, (wco) => [(0, configs_1.getDevServerConfig)(wco), (0, configs_1.getCommonConfig)(wco), (0, configs_1.getStylesConfig)(wco)], options);
         if (!config.devServer) {
             throw new Error('Webpack Dev Server configuration was not set.');
         }
@@ -207,6 +202,10 @@ function serveWebpackBrowser(options, context, transforms = {}) {
             webpackDevServerFactory: require('webpack-dev-server'),
         }).pipe((0, operators_1.concatMap)(async (buildEvent, index) => {
             var _a, _b;
+            const webpackRawStats = buildEvent.webpackStats;
+            if (!webpackRawStats) {
+                throw new Error('Webpack stats build result is required.');
+            }
             // Resolve serve address.
             const publicPath = (_b = (_a = webpackConfig.devServer) === null || _a === void 0 ? void 0 : _a.devMiddleware) === null || _b === void 0 ? void 0 : _b.publicPath;
             const serverAddress = url.format({
@@ -235,7 +234,11 @@ function serveWebpackBrowser(options, context, transforms = {}) {
             else {
                 logger.info(`\n${color_1.colors.redBright(color_1.colors.symbols.cross)} Failed to compile.`);
             }
-            return { ...buildEvent, baseUrl: serverAddress };
+            return {
+                ...buildEvent,
+                baseUrl: serverAddress,
+                stats: (0, stats_1.generateBuildEventStats)(webpackRawStats, browserOptions),
+            };
         }));
     }));
 }

package/src/builders/karma/find-tests-plugin.js

@@ -117,6 +117,7 @@ async function findMatchingTests(pattern, workspaceRoot, projectSourceRoot) {
         root: projectSourceRoot,
         nomount: true,
         absolute: true,
+        ignore: ['**/node_modules/**'],
     });
 }
 async function isDirectory(path) {

package/src/builders/karma/index.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
-import { ConfigOptions } from 'karma';
+import type { ConfigOptions } from 'karma';
 import { Observable } from 'rxjs';
 import { Configuration } from 'webpack';
 import { ExecutionTransformer } from '../../transforms';

package/src/builders/karma/index.js

@@ -33,7 +33,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.execute = void 0;
 const architect_1 = require("@angular-devkit/architect");
 const core_1 = require("@angular-devkit/core");
-const karma_1 = require("karma");
 const module_1 = require("module");
 const path = __importStar(require("path"));
 const rxjs_1 = require("rxjs");
@@ -91,7 +90,7 @@ function execute(options, context, transforms = {}) {
         }
         const karmaOptions = options.karmaConfig
             ? {}
-            : getBuiltInKarmaConfig(context.workspaceRoot, projectName);
+            : getBuiltInKarmaConfig(karma, context.workspaceRoot, projectName);
         karmaOptions.singleRun = singleRun;
         // Convert browsers from a string to an array
         if (options.browsers) {
@@ -130,7 +129,7 @@ function execute(options, context, transforms = {}) {
             webpackConfig,
             logger: context.logger,
         };
-        const parsedKarmaConfig = await karma_1.config.parseConfig(options.karmaConfig && path.resolve(context.workspaceRoot, options.karmaConfig), transforms.karmaOptions ? transforms.karmaOptions(karmaOptions) : karmaOptions, { promiseConfig: true, throwErrors: true });
+        const parsedKarmaConfig = await karma.config.parseConfig(options.karmaConfig && path.resolve(context.workspaceRoot, options.karmaConfig), transforms.karmaOptions ? transforms.karmaOptions(karmaOptions) : karmaOptions, { promiseConfig: true, throwErrors: true });
         return [karma, parsedKarmaConfig];
     }), (0, operators_1.switchMap)(([karma, karmaConfig]) => new rxjs_1.Observable((subscriber) => {
         var _a, _b, _c;
@@ -154,7 +153,7 @@ function execute(options, context, transforms = {}) {
     })), (0, operators_1.defaultIfEmpty)({ success: false }));
 }
 exports.execute = execute;
-function getBuiltInKarmaConfig(workspaceRoot, projectName) {
+function getBuiltInKarmaConfig(karma, workspaceRoot, projectName) {
     let coverageFolderName = projectName.charAt(0) === '@' ? projectName.slice(1) : projectName;
     if (/[A-Z]/.test(coverageFolderName)) {
         coverageFolderName = core_1.strings.dasherize(coverageFolderName);
@@ -184,7 +183,7 @@ function getBuiltInKarmaConfig(workspaceRoot, projectName) {
         reporters: ['progress', 'kjhtml'],
         port: 9876,
         colors: true,
-        logLevel: karma_1.constants.LOG_INFO,
+        logLevel: karma.constants.LOG_INFO,
         autoWatch: true,
         browsers: ['Chrome'],
         restartOnFileChange: true,

package/src/builders/server/schema.json

@@ -36,8 +36,8 @@
     },
     "optimization": {
       "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking and dead-code elimination. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
-      "x-user-analytics": 16,
       "default": true,
+      "x-user-analytics": "ep.ng_optimization",
       "oneOf": [
         {
           "type": "object",

package/src/sass/sass-service.d.ts

@@ -5,7 +5,17 @@
  * 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 { CompileResult, StringOptionsWithImporter, StringOptionsWithoutImporter } from 'sass';
+import { CompileResult, FileImporter, StringOptionsWithImporter, StringOptionsWithoutImporter } from 'sass';
+declare type FileImporterOptions = Parameters<FileImporter['findFileUrl']>[1];
+export interface FileImporterWithRequestContextOptions extends FileImporterOptions {
+    /**
+     * This is a custom option and is required as SASS does not provide context from which the file is being resolved.
+     * This breaks Yarn PNP as transitive deps cannot be resolved from the workspace root.
+     *
+     * Workaround until https://github.com/sass/sass/issues/3247 is addressed.
+     */
+    previousResolvedModules?: Set<string>;
+}
 /**
  * A Sass renderer implementation that provides an interface that can be used by Webpack's
  * `sass-loader`. The implementation uses a Worker thread to perform the Sass rendering
@@ -45,3 +55,4 @@ export declare class SassWorkerImplementation {
     private createRequest;
     private isImporter;
 }
+export {};