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

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,44 @@ 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) {
+                    contents = await transformWithBabel(args.path, data, pluginOptions);
+                    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');
+                    contents = await transformWithBabel(args.path, data, pluginOptions);
+                    (_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 +445,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/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/utils/environment-options.d.ts

@@ -10,3 +10,4 @@ export declare const shouldBeautify: boolean;
 export declare const allowMinify: boolean;
 export declare const maxWorkers: number;
 export declare const useLegacySass: boolean;
+export declare const debugPerformance: 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.useLegacySass = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
+exports.debugPerformance = exports.useLegacySass = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
 const color_1 = require("./color");
 function isDisabled(variable) {
     return variable === '0' || variable.toLowerCase() === 'false';
@@ -77,3 +77,5 @@ exports.useLegacySass = (() => {
     console.warn(color_1.colors.yellow(`Warning: 'NG_BUILD_LEGACY_SASS' environment variable support will be removed in version 16.`));
     return isEnabled(legacySassVariable);
 })();
+const debugPerfVariable = process.env['NG_BUILD_DEBUG_PERF'];
+exports.debugPerformance = isPresent(debugPerfVariable) && isEnabled(debugPerfVariable);

package/src/webpack/configs/common.js

@@ -44,6 +44,7 @@ const load_esm_1 = require("../../utils/load-esm");
 const plugins_1 = require("../plugins");
 const devtools_ignore_plugin_1 = require("../plugins/devtools-ignore-plugin");
 const named_chunks_plugin_1 = require("../plugins/named-chunks-plugin");
+const occurrences_plugin_1 = require("../plugins/occurrences-plugin");
 const progress_plugin_1 = require("../plugins/progress-plugin");
 const transfer_size_plugin_1 = require("../plugins/transfer-size-plugin");
 const typescript_1 = require("../plugins/typescript");
@@ -52,7 +53,7 @@ const helpers_1 = require("../utils/helpers");
 const VENDORS_TEST = /[\\/]node_modules[\\/]/;
 // eslint-disable-next-line max-lines-per-function
 async function getCommonConfig(wco) {
-    var _a, _b;
+    var _a, _b, _c;
     const { root, projectRoot, buildOptions, tsConfig, projectName, sourceRoot, tsConfigPath } = wco;
     const { cache, codeCoverage, crossOrigin = 'none', platform = 'browser', aot = true, codeCoverageExclude = [], main, polyfills, sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap, hidden: hiddenSourceMap, }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, commonChunk, vendorChunk, subresourceIntegrity, verbose, poll, webWorkerTsConfig, externalDependencies = [], allowedCommonJsDependencies, } = buildOptions;
     const isPlatformServer = buildOptions.platform === 'server';
@@ -68,13 +69,28 @@ async function getCommonConfig(wco) {
     if (buildOptions.progress) {
         extraPlugins.push(new progress_plugin_1.ProgressPlugin(platform));
     }
+    const localizePackageInitEntryPoint = '@angular/localize/init';
+    const hasLocalizeType = (_a = tsConfig.options.types) === null || _a === void 0 ? void 0 : _a.some((t) => t === '@angular/localize' || t === localizePackageInitEntryPoint);
+    if (hasLocalizeType) {
+        entryPoints['main'] = [localizePackageInitEntryPoint];
+    }
     if (buildOptions.main) {
         const mainPath = path.resolve(root, buildOptions.main);
-        entryPoints['main'] = [mainPath];
+        if (Array.isArray(entryPoints['main'])) {
+            entryPoints['main'].push(mainPath);
+        }
+        else {
+            entryPoints['main'] = [mainPath];
+        }
     }
     if (isPlatformServer) {
         // Fixes Critical dependency: the request of a dependency is an expression
         extraPlugins.push(new webpack_2.ContextReplacementPlugin(/@?hapi|express[\\/]/));
+        if (Array.isArray(entryPoints['main'])) {
+            // This import must come before any imports (direct or transitive) that rely on DOM built-ins being
+            // available, such as `@angular/elements`.
+            entryPoints['main'].unshift('@angular/platform-server/init');
+        }
     }
     if (polyfills === null || polyfills === void 0 ? void 0 : polyfills.length) {
         // `zone.js/testing` is a **special** polyfill because when not imported in the main it fails with the below errors:
@@ -253,9 +269,9 @@ async function getCommonConfig(wco) {
         output: {
             uniqueName: projectName,
             hashFunction: 'xxhash64',
-            clean: (_a = buildOptions.deleteOutputPath) !== null && _a !== void 0 ? _a : true,
+            clean: (_b = buildOptions.deleteOutputPath) !== null && _b !== void 0 ? _b : true,
             path: path.resolve(root, buildOptions.outputPath),
-            publicPath: (_b = buildOptions.deployUrl) !== null && _b !== void 0 ? _b : '',
+            publicPath: (_c = buildOptions.deployUrl) !== null && _c !== void 0 ? _c : '',
             filename: `[name]${hashFormat.chunk}.js`,
             chunkFilename: `[name]${hashFormat.chunk}.js`,
             libraryTarget: isPlatformServer ? 'commonjs' : undefined,
@@ -385,7 +401,15 @@ async function getCommonConfig(wco) {
                 },
             },
         },
-        plugins: [new named_chunks_plugin_1.NamedChunksPlugin(), new plugins_1.DedupeModuleResolvePlugin({ verbose }), ...extraPlugins],
+        plugins: [
+            new named_chunks_plugin_1.NamedChunksPlugin(),
+            new occurrences_plugin_1.OccurrencesPlugin({
+                aot,
+                scriptsOptimization,
+            }),
+            new plugins_1.DedupeModuleResolvePlugin({ verbose }),
+            ...extraPlugins,
+        ],
         node: false,
     };
 }

package/src/webpack/configs/index.d.ts

@@ -5,7 +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 * from './analytics';
 export * from './common';
 export * from './dev-server';
 export * from './styles';