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

package/src/webpack/configs/styles.js

@@ -33,54 +33,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStylesConfig = exports.resolveGlobalStyles = void 0;
+exports.getStylesConfig = void 0;
 const fs = __importStar(require("fs"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const path = __importStar(require("path"));
+const url_1 = require("url");
 const sass_service_1 = require("../../sass/sass-service");
 const sass_service_legacy_1 = require("../../sass/sass-service-legacy");
 const environment_options_1 = require("../../utils/environment-options");
 const plugins_1 = require("../plugins");
 const css_optimizer_plugin_1 = require("../plugins/css-optimizer-plugin");
+const styles_webpack_plugin_1 = require("../plugins/styles-webpack-plugin");
 const helpers_1 = require("../utils/helpers");
-function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks, skipResolution = false) {
-    const entryPoints = {};
-    const noInjectNames = [];
-    const paths = [];
-    if (styleEntrypoints.length === 0) {
-        return { entryPoints, noInjectNames, paths };
-    }
-    for (const style of (0, helpers_1.normalizeExtraEntryPoints)(styleEntrypoints, 'styles')) {
-        let stylesheetPath = style.input;
-        if (!skipResolution) {
-            stylesheetPath = path.resolve(root, stylesheetPath);
-            if (!fs.existsSync(stylesheetPath)) {
-                try {
-                    stylesheetPath = require.resolve(style.input, { paths: [root] });
-                }
-                catch { }
-            }
-        }
-        if (!preserveSymlinks) {
-            stylesheetPath = fs.realpathSync(stylesheetPath);
-        }
-        // Add style entry points.
-        if (entryPoints[style.bundleName]) {
-            entryPoints[style.bundleName].push(stylesheetPath);
-        }
-        else {
-            entryPoints[style.bundleName] = [stylesheetPath];
-        }
-        // Add non injected styles to the list.
-        if (!style.inject) {
-            noInjectNames.push(style.bundleName);
-        }
-        // Add global css paths.
-        paths.push(stylesheetPath);
-    }
-    return { entryPoints, noInjectNames, paths };
-}
-exports.resolveGlobalStyles = resolveGlobalStyles;
 // eslint-disable-next-line max-lines-per-function
 function getStylesConfig(wco) {
     var _a, _b, _c;
@@ -93,10 +57,17 @@ function getStylesConfig(wco) {
     // use includePaths from appConfig
     const includePaths = (_c = (_b = (_a = buildOptions.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths) === null || _b === void 0 ? void 0 : _b.map((p) => path.resolve(root, p))) !== null && _c !== void 0 ? _c : [];
     // Process global styles.
-    const { entryPoints, noInjectNames, paths: globalStylePaths, } = resolveGlobalStyles(buildOptions.styles, root, !!buildOptions.preserveSymlinks);
-    if (noInjectNames.length > 0) {
-        // Add plugin to remove hashes from lazy styles.
-        extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
+    if (buildOptions.styles.length > 0) {
+        const { entryPoints, noInjectNames } = (0, helpers_1.normalizeGlobalStyles)(buildOptions.styles);
+        extraPlugins.push(new styles_webpack_plugin_1.StylesWebpackPlugin({
+            root,
+            entryPoints,
+            preserveSymlinks: buildOptions.preserveSymlinks,
+        }));
+        if (noInjectNames.length > 0) {
+            // Add plugin to remove hashes from lazy styles.
+            extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
+        }
     }
     const sassImplementation = environment_options_1.useLegacySass
         ? new sass_service_legacy_1.SassLegacyWorkerImplementation()
@@ -238,7 +209,7 @@ function getStylesConfig(wco) {
                 },
                 {
                     loader: require.resolve('sass-loader'),
-                    options: getSassLoaderOptions(root, projectRoot, sassImplementation, includePaths, false, !buildOptions.verbose),
+                    options: getSassLoaderOptions(root, sassImplementation, includePaths, false, !buildOptions.verbose, !!buildOptions.preserveSymlinks),
                 },
             ],
         },
@@ -253,7 +224,7 @@ function getStylesConfig(wco) {
                 },
                 {
                     loader: require.resolve('sass-loader'),
-                    options: getSassLoaderOptions(root, projectRoot, sassImplementation, includePaths, true, !buildOptions.verbose),
+                    options: getSassLoaderOptions(root, sassImplementation, includePaths, true, !buildOptions.verbose, !!buildOptions.preserveSymlinks),
                 },
             ],
         },
@@ -275,7 +246,6 @@ function getStylesConfig(wco) {
         },
     ];
     return {
-        entry: entryPoints,
         module: {
             rules: styleLanguages.map(({ extensions, use }) => ({
                 test: new RegExp(`\\.(?:${extensions.join('|')})$`, 'i'),
@@ -286,8 +256,7 @@ function getStylesConfig(wco) {
                             // Global styles are only defined global styles
                             {
                                 use: globalStyleLoaders,
-                                include: globalStylePaths,
-                                resourceQuery: { not: [/\?ngResource/] },
+                                resourceQuery: /\?ngGlobalStyle/,
                             },
                             // Component styles are all styles except defined global styles
                             {
@@ -330,24 +299,18 @@ function getTailwindConfigPath({ projectRoot, root }) {
     }
     return undefined;
 }
-function getSassLoaderOptions(root, projectRoot, implementation, includePaths, indentedSyntax, verbose) {
+function getSassLoaderOptions(root, implementation, includePaths, indentedSyntax, verbose, preserveSymlinks) {
     return implementation instanceof sass_service_1.SassWorkerImplementation
         ? {
             sourceMap: true,
             api: 'modern',
             implementation,
-            // Webpack importer is only implemented in the legacy API.
+            // Webpack importer is only implemented in the legacy API and we have our own custom Webpack importer.
             // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L642-L651
             webpackImporter: false,
-            sassOptions: {
-                loadPaths: [
-                    ...includePaths,
-                    // Needed to resolve node packages and retain the same behaviour of with the legacy API as sass-loader resolves
-                    // scss also from the cwd and project root.
-                    // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L307
-                    projectRoot,
-                    path.join(root, 'node_modules'),
-                ],
+            sassOptions: (loaderContext) => ({
+                importers: [getSassResolutionImporter(loaderContext, root, preserveSymlinks)],
+                loadPaths: includePaths,
                 // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
                 // Ex: /* autoprefixer grid: autoplace */
                 // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
@@ -356,7 +319,7 @@ function getSassLoaderOptions(root, projectRoot, implementation, includePaths, i
                 quietDeps: !verbose,
                 verbose,
                 syntax: indentedSyntax ? 'indented' : 'scss',
-            },
+            }),
         }
         : {
             sourceMap: true,
@@ -385,3 +348,50 @@ function getSassLoaderOptions(root, projectRoot, implementation, includePaths, i
             },
         };
 }
+function getSassResolutionImporter(loaderContext, root, preserveSymlinks) {
+    const commonResolverOptions = {
+        conditionNames: ['sass', 'style'],
+        mainFields: ['sass', 'style', 'main', '...'],
+        extensions: ['.scss', '.sass', '.css'],
+        restrictions: [/\.((sa|sc|c)ss)$/i],
+        preferRelative: true,
+        symlinks: !preserveSymlinks,
+    };
+    // Sass also supports import-only files. If you name a file <name>.import.scss, it will only be loaded for imports, not for @uses.
+    // See: https://sass-lang.com/documentation/at-rules/import#import-only-files
+    const resolveImport = loaderContext.getResolve({
+        ...commonResolverOptions,
+        dependencyType: 'sass-import',
+        mainFiles: ['_index.import', '_index', 'index.import', 'index', '...'],
+    });
+    const resolveModule = loaderContext.getResolve({
+        ...commonResolverOptions,
+        dependencyType: 'sass-module',
+        mainFiles: ['_index', 'index', '...'],
+    });
+    return {
+        findFileUrl: async (url, { fromImport }) => {
+            if (url.charAt(0) === '.') {
+                // Let Sass handle relative imports.
+                return null;
+            }
+            let file;
+            const resolve = fromImport ? resolveImport : resolveModule;
+            try {
+                file = await resolve(root, url);
+            }
+            catch {
+                // Try to resolve a partial file
+                // @use '@material/button/button' as mdc-button;
+                // `@material/button/button` -> `@material/button/_button`
+                const lastSlashIndex = url.lastIndexOf('/');
+                const underscoreIndex = lastSlashIndex + 1;
+                if (underscoreIndex > 0 && url.charAt(underscoreIndex) !== '_') {
+                    const partialFileUrl = `${url.slice(0, underscoreIndex)}_${url.slice(underscoreIndex)}`;
+                    file = await resolve(root, partialFileUrl).catch(() => undefined);
+                }
+            }
+            return file ? (0, url_1.pathToFileURL)(file) : null;
+        },
+    };
+}

package/src/webpack/plugins/occurrences-plugin.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { Compiler } from 'webpack';
+export interface OccurrencesPluginOptions {
+    aot?: boolean;
+    scriptsOptimization?: boolean;
+}
+export declare class OccurrencesPlugin {
+    private options;
+    constructor(options: OccurrencesPluginOptions);
+    apply(compiler: Compiler): void;
+    private countOccurrences;
+}

package/src/webpack/plugins/occurrences-plugin.js

@@ -0,0 +1,79 @@
+"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.OccurrencesPlugin = void 0;
+const PLUGIN_NAME = 'angular-occurrences-plugin';
+class OccurrencesPlugin {
+    constructor(options) {
+        this.options = options;
+    }
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tapPromise({
+                name: PLUGIN_NAME,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ANALYSE,
+            }, async (compilationAssets) => {
+                for (const assetName of Object.keys(compilationAssets)) {
+                    if (!assetName.endsWith('.js')) {
+                        continue;
+                    }
+                    const scriptAsset = compilation.getAsset(assetName);
+                    if (!scriptAsset || scriptAsset.source.size() <= 0) {
+                        continue;
+                    }
+                    const src = scriptAsset.source.source().toString('utf-8');
+                    let ngComponentCount = 0;
+                    if (!this.options.aot) {
+                        // Count the number of `Component({` strings (case sensitive), which happens in __decorate().
+                        ngComponentCount += this.countOccurrences(src, 'Component({');
+                    }
+                    if (this.options.scriptsOptimization) {
+                        // for ascii_only true
+                        ngComponentCount += this.countOccurrences(src, '.\\u0275cmp', false);
+                    }
+                    else {
+                        // For Ivy we just count ɵcmp.src
+                        ngComponentCount += this.countOccurrences(src, '.ɵcmp', true);
+                    }
+                    compilation.updateAsset(assetName, (s) => s, (assetInfo) => ({
+                        ...assetInfo,
+                        ngComponentCount,
+                    }));
+                }
+            });
+        });
+    }
+    countOccurrences(source, match, wordBreak = false) {
+        let count = 0;
+        // We condition here so branch prediction happens out of the loop, not in it.
+        if (wordBreak) {
+            const re = /\w/;
+            for (let pos = source.lastIndexOf(match); pos >= 0; pos = source.lastIndexOf(match, pos)) {
+                if (!(re.test(source[pos - 1] || '') || re.test(source[pos + match.length] || ''))) {
+                    count++; // 1 match, AH! AH! AH! 2 matches, AH! AH! AH!
+                }
+                pos -= match.length;
+                if (pos < 0) {
+                    break;
+                }
+            }
+        }
+        else {
+            for (let pos = source.lastIndexOf(match); pos >= 0; pos = source.lastIndexOf(match, pos)) {
+                count++; // 1 match, AH! AH! AH! 2 matches, AH! AH! AH!
+                pos -= match.length;
+                if (pos < 0) {
+                    break;
+                }
+            }
+        }
+        return count;
+    }
+}
+exports.OccurrencesPlugin = OccurrencesPlugin;

package/src/webpack/plugins/scripts-webpack-plugin.js

@@ -34,6 +34,8 @@ exports.ScriptsWebpackPlugin = void 0;
 const loader_utils_1 = require("loader-utils");
 const path = __importStar(require("path"));
 const webpack_1 = require("webpack");
+const error_1 = require("../../utils/error");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const Entrypoint = require('webpack/lib/Entrypoint');
 /**
  * The name of the plugin provided to Webpack when tapping Webpack compiler hooks.
@@ -81,18 +83,35 @@ class ScriptsWebpackPlugin {
         chunk.addGroup(entrypoint);
         compilation.entrypoints.set(this.options.name, entrypoint);
         compilation.chunks.add(chunk);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         compilation.assets[filename] = source;
         compilation.hooks.chunkAsset.call(chunk, filename);
     }
     apply(compiler) {
-        if (!this.options.scripts || this.options.scripts.length === 0) {
+        if (this.options.scripts.length === 0) {
             return;
         }
-        const scripts = this.options.scripts
-            .filter((script) => !!script)
-            .map((script) => path.resolve(this.options.basePath || '', script));
+        const resolver = compiler.resolverFactory.get('normal', {
+            preferRelative: true,
+            useSyncFileSystemCalls: true,
+            fileSystem: compiler.inputFileSystem,
+        });
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            const scripts = [];
+            for (const script of this.options.scripts) {
+                try {
+                    const resolvedPath = resolver.resolveSync({}, this.options.basePath, script);
+                    if (resolvedPath) {
+                        scripts.push(resolvedPath);
+                    }
+                    else {
+                        (0, webpack_diagnostics_1.addError)(compilation, `Cannot resolve '${script}'.`);
+                    }
+                }
+                catch (error) {
+                    (0, error_1.assertIsError)(error);
+                    (0, webpack_diagnostics_1.addError)(compilation, error.message);
+                }
+            }
             compilation.hooks.additionalAssets.tapPromise(PLUGIN_NAME, async () => {
                 if (await this.shouldSkip(compilation, scripts)) {
                     if (this._cachedOutput) {

package/src/webpack/plugins/styles-webpack-plugin.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import type { Compiler } from 'webpack';
+export interface StylesWebpackPluginOptions {
+    preserveSymlinks?: boolean;
+    root: string;
+    entryPoints: Record<string, string[]>;
+}
+export declare class StylesWebpackPlugin {
+    private readonly options;
+    private compilation;
+    constructor(options: StylesWebpackPluginOptions);
+    apply(compiler: Compiler): void;
+}

package/src/webpack/plugins/styles-webpack-plugin.js

@@ -0,0 +1,71 @@
+"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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StylesWebpackPlugin = void 0;
+const assert_1 = __importDefault(require("assert"));
+const error_1 = require("../../utils/error");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
+/**
+ * The name of the plugin provided to Webpack when tapping Webpack compiler hooks.
+ */
+const PLUGIN_NAME = 'styles-webpack-plugin';
+class StylesWebpackPlugin {
+    constructor(options) {
+        this.options = options;
+    }
+    apply(compiler) {
+        const { entryPoints, preserveSymlinks, root } = this.options;
+        const webpackOptions = compiler.options;
+        const entry = typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
+        const resolver = compiler.resolverFactory.get('global-styles', {
+            conditionNames: ['sass', 'less', 'style'],
+            mainFields: ['sass', 'less', 'style', 'main', '...'],
+            extensions: ['.scss', '.sass', '.less', '.css'],
+            restrictions: [/\.((le|sa|sc|c)ss)$/i],
+            preferRelative: true,
+            useSyncFileSystemCalls: true,
+            symlinks: !preserveSymlinks,
+            fileSystem: compiler.inputFileSystem,
+        });
+        webpackOptions.entry = async () => {
+            var _a, _b;
+            var _c;
+            const entrypoints = await entry;
+            for (const [bundleName, paths] of Object.entries(entryPoints)) {
+                (_a = entrypoints[bundleName]) !== null && _a !== void 0 ? _a : (entrypoints[bundleName] = {});
+                const entryImport = ((_b = (_c = entrypoints[bundleName]).import) !== null && _b !== void 0 ? _b : (_c.import = []));
+                for (const path of paths) {
+                    try {
+                        const resolvedPath = resolver.resolveSync({}, root, path);
+                        if (resolvedPath) {
+                            entryImport.push(`${resolvedPath}?ngGlobalStyle`);
+                        }
+                        else {
+                            (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
+                            (0, webpack_diagnostics_1.addError)(this.compilation, `Cannot resolve '${path}'.`);
+                        }
+                    }
+                    catch (error) {
+                        (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
+                        (0, error_1.assertIsError)(error);
+                        (0, webpack_diagnostics_1.addError)(this.compilation, error.message);
+                    }
+                }
+            }
+            return entrypoints;
+        };
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            this.compilation = compilation;
+        });
+    }
+}
+exports.StylesWebpackPlugin = StylesWebpackPlugin;

package/src/webpack/utils/helpers.d.ts

@@ -21,8 +21,12 @@ export declare type NormalizedEntryPoint = Required<Exclude<ScriptElement | Styl
 export declare function normalizeExtraEntryPoints(extraEntryPoints: (ScriptElement | StyleElement)[], defaultBundleName: string): NormalizedEntryPoint[];
 export declare function assetNameTemplateFactory(hashFormat: HashFormat): (resourcePath: string) => string;
 export declare function getInstrumentationExcludedPaths(root: string, excludedPaths: string[]): Set<string>;
+export declare function normalizeGlobalStyles(styleEntrypoints: StyleElement[]): {
+    entryPoints: Record<string, string[]>;
+    noInjectNames: string[];
+};
 export declare function getCacheSettings(wco: WebpackConfigOptions, angularVersion: string): WebpackOptionsNormalized['cache'];
-export declare function globalScriptsByBundleName(root: string, scripts: ScriptElement[]): {
+export declare function globalScriptsByBundleName(scripts: ScriptElement[]): {
     bundleName: string;
     inject: boolean;
     paths: string[];

package/src/webpack/utils/helpers.js

@@ -33,9 +33,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStatsOptions = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+exports.getStatsOptions = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.normalizeGlobalStyles = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
 const crypto_1 = require("crypto");
-const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const path = __importStar(require("path"));
 const schema_1 = require("../../builders/browser/schema");
@@ -130,6 +129,26 @@ function getInstrumentationExcludedPaths(root, excludedPaths) {
     return excluded;
 }
 exports.getInstrumentationExcludedPaths = getInstrumentationExcludedPaths;
+function normalizeGlobalStyles(styleEntrypoints) {
+    var _a;
+    var _b;
+    const entryPoints = {};
+    const noInjectNames = [];
+    if (styleEntrypoints.length === 0) {
+        return { entryPoints, noInjectNames };
+    }
+    for (const style of normalizeExtraEntryPoints(styleEntrypoints, 'styles')) {
+        // Add style entry points.
+        (_a = entryPoints[_b = style.bundleName]) !== null && _a !== void 0 ? _a : (entryPoints[_b] = []);
+        entryPoints[style.bundleName].push(style.input);
+        // Add non injected styles to the list.
+        if (!style.inject) {
+            noInjectNames.push(style.bundleName);
+        }
+    }
+    return { entryPoints, noInjectNames };
+}
+exports.normalizeGlobalStyles = normalizeGlobalStyles;
 function getCacheSettings(wco, angularVersion) {
     const { enabled, path: cacheDirectory } = wco.buildOptions.cache;
     if (enabled) {
@@ -164,31 +183,22 @@ function getCacheSettings(wco, angularVersion) {
     return false;
 }
 exports.getCacheSettings = getCacheSettings;
-function globalScriptsByBundleName(root, scripts) {
+function globalScriptsByBundleName(scripts) {
     return normalizeExtraEntryPoints(scripts, 'scripts').reduce((prev, curr) => {
         const { bundleName, inject, input } = curr;
-        let resolvedPath = path.resolve(root, input);
-        if (!(0, fs_1.existsSync)(resolvedPath)) {
-            try {
-                resolvedPath = require.resolve(input, { paths: [root] });
-            }
-            catch {
-                throw new Error(`Script file ${input} does not exist.`);
-            }
-        }
         const existingEntry = prev.find((el) => el.bundleName === bundleName);
         if (existingEntry) {
             if (existingEntry.inject && !inject) {
                 // All entries have to be lazy for the bundle to be lazy.
                 throw new Error(`The ${bundleName} bundle is mixing injected and non-injected scripts.`);
             }
-            existingEntry.paths.push(resolvedPath);
+            existingEntry.paths.push(input);
         }
         else {
             prev.push({
                 bundleName,
                 inject,
-                paths: [resolvedPath],
+                paths: [input],
             });
         }
         return prev;

package/src/webpack/utils/stats.d.ts

@@ -22,17 +22,22 @@ export interface BundleStats {
     initial: boolean;
     stats: BundleStatsData;
 }
-export declare function generateBundleStats(info: {
-    rawSize?: number;
-    estimatedTransferSize?: number;
-    files?: string[];
-    names?: string[];
-    initial?: boolean;
-    rendered?: boolean;
-}): BundleStats;
 export declare function statsWarningsToString(json: StatsCompilation, statsConfig: WebpackStatsOptions): string;
 export declare function statsErrorsToString(json: StatsCompilation, statsConfig: WebpackStatsOptions): string;
 export declare function statsHasErrors(json: StatsCompilation): boolean;
 export declare function statsHasWarnings(json: StatsCompilation): boolean;
 export declare function createWebpackLoggingCallback(options: BrowserBuilderOptions, logger: logging.LoggerApi): WebpackLoggingCallback;
+export interface BuildEventStats {
+    aot: boolean;
+    optimization: boolean;
+    allChunksCount: number;
+    lazyChunksCount: number;
+    initialChunksCount: number;
+    changedChunksCount?: number;
+    durationInMs: number;
+    cssSizeInBytes: number;
+    jsSizeInBytes: number;
+    ngComponentCount: number;
+}
+export declare function generateBuildEventStats(webpackStats: StatsCompilation, browserBuilderOptions: BrowserBuilderOptions): BuildEventStats;
 export declare function webpackStatsLogger(logger: logging.LoggerApi, json: StatsCompilation, config: Configuration, budgetFailures?: BudgetCalculatorResult[]): void;

package/src/webpack/utils/stats.js

@@ -33,10 +33,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.webpackStatsLogger = exports.createWebpackLoggingCallback = exports.statsHasWarnings = exports.statsHasErrors = exports.statsErrorsToString = exports.statsWarningsToString = exports.generateBundleStats = exports.formatSize = void 0;
+exports.webpackStatsLogger = exports.generateBuildEventStats = exports.createWebpackLoggingCallback = exports.statsHasWarnings = exports.statsHasErrors = exports.statsErrorsToString = exports.statsWarningsToString = exports.formatSize = void 0;
 const core_1 = require("@angular-devkit/core");
+const assert_1 = __importDefault(require("assert"));
 const path = __importStar(require("path"));
 const text_table_1 = __importDefault(require("text-table"));
+const utils_1 = require("../../utils");
 const color_1 = require("../../utils/color");
 const async_chunks_1 = require("./async-chunks");
 const helpers_1 = require("./helpers");
@@ -52,6 +54,11 @@ function formatSize(size) {
     return `${roundedSize.toFixed(fractionDigits)} ${abbreviations[index]}`;
 }
 exports.formatSize = formatSize;
+function getBuildDuration(webpackStats) {
+    (0, assert_1.default)(webpackStats.builtAt, 'buildAt cannot be undefined');
+    (0, assert_1.default)(webpackStats.time, 'time cannot be undefined');
+    return Date.now() - webpackStats.builtAt + webpackStats.time;
+}
 function generateBundleStats(info) {
     var _a, _b, _c;
     const rawSize = typeof info.rawSize === 'number' ? info.rawSize : '-';
@@ -64,7 +71,6 @@ function generateBundleStats(info) {
         stats: [files, names, rawSize, estimatedTransferSize],
     };
 }
-exports.generateBundleStats = generateBundleStats;
 function generateBuildStatsTable(data, colors, showTotalSize, showEstimatedTransferSize, budgetFailures) {
     const g = (x) => (colors ? color_1.colors.greenBright(x) : x);
     const c = (x) => (colors ? color_1.colors.cyanBright(x) : x);
@@ -238,10 +244,7 @@ statsConfig, budgetFailures) {
     // In some cases we do things outside of webpack context
     // Such us index generation, service worker augmentation etc...
     // This will correct the time and include these.
-    let time = 0;
-    if (json.builtAt !== undefined && json.time !== undefined) {
-        time = Date.now() - json.builtAt + json.time;
-    }
+    const time = getBuildDuration(json);
     if (unchangedChunkNumber > 0) {
         return ('\n' +
             rs(core_1.tags.stripIndents `
@@ -370,6 +373,54 @@ function createWebpackLoggingCallback(options, logger) {
     };
 }
 exports.createWebpackLoggingCallback = createWebpackLoggingCallback;
+function generateBuildEventStats(webpackStats, browserBuilderOptions) {
+    var _a, _b;
+    const { chunks = [], assets = [] } = webpackStats;
+    let jsSizeInBytes = 0;
+    let cssSizeInBytes = 0;
+    let initialChunksCount = 0;
+    let ngComponentCount = 0;
+    let changedChunksCount = 0;
+    const allChunksCount = chunks.length;
+    const isFirstRun = !runsCache.has(webpackStats.outputPath || '');
+    const chunkFiles = new Set();
+    for (const chunk of chunks) {
+        if (!isFirstRun && chunk.rendered) {
+            changedChunksCount++;
+        }
+        if (chunk.initial) {
+            initialChunksCount++;
+        }
+        for (const file of (_a = chunk.files) !== null && _a !== void 0 ? _a : []) {
+            chunkFiles.add(file);
+        }
+    }
+    for (const asset of assets) {
+        if (asset.name.endsWith('.map') || !chunkFiles.has(asset.name)) {
+            continue;
+        }
+        if (asset.name.endsWith('.js')) {
+            jsSizeInBytes += asset.size;
+            ngComponentCount += (_b = asset.info.ngComponentCount) !== null && _b !== void 0 ? _b : 0;
+        }
+        else if (asset.name.endsWith('.css')) {
+            cssSizeInBytes += asset.size;
+        }
+    }
+    return {
+        optimization: !!(0, utils_1.normalizeOptimization)(browserBuilderOptions.optimization).scripts,
+        aot: browserBuilderOptions.aot !== false,
+        allChunksCount,
+        lazyChunksCount: allChunksCount - initialChunksCount,
+        initialChunksCount,
+        changedChunksCount,
+        durationInMs: getBuildDuration(webpackStats),
+        cssSizeInBytes,
+        jsSizeInBytes,
+        ngComponentCount,
+    };
+}
+exports.generateBuildEventStats = generateBuildEventStats;
 function webpackStatsLogger(logger, json, config, budgetFailures) {
     logger.info(statsToString(json, config.stats, budgetFailures));
     if (typeof config.stats !== 'object') {