fix(@angular-devkit/build-angular): correctly mark async chunks as non initial in dev-server

Author: alan-agius4

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -335,7 +335,7 @@ export function serveWebpackBrowser(
       }
 
       return runWebpackDevServer(webpackConfig, context, {
-        logging: transforms.logging || createWebpackLoggingCallback(!!options.verbose, logger),
+        logging: transforms.logging || createWebpackLoggingCallback(browserOptions, logger),
         webpackFactory: require('webpack') as typeof webpack,
         webpackDevServerFactory: require('webpack-dev-server') as typeof webpackDevServer,
       }).pipe(

packages/angular_devkit/build_angular/src/extract-i18n/index.ts

@@ -175,28 +175,29 @@ export async function execute(
   let useLegacyIds = true;
 
   const ivyMessages: LocalizeMessage[] = [];
-  const { config, projectRoot } = await generateBrowserWebpackConfigFromContext(
-    {
-      ...browserOptions,
-      optimization: false,
-      sourceMap: {
-        scripts: true,
-        styles: false,
-        vendor: true,
-      },
-      buildOptimizer: false,
-      aot: true,
-      progress: options.progress,
-      budgets: [],
-      assets: [],
-      scripts: [],
-      styles: [],
-      deleteOutputPath: false,
-      extractLicenses: false,
-      subresourceIntegrity: false,
-      outputHashing: OutputHashing.None,
-      namedChunks: true,
+  const builderOptions = {
+    ...browserOptions,
+    optimization: false,
+    sourceMap: {
+      scripts: true,
+      styles: false,
+      vendor: true,
     },
+    buildOptimizer: false,
+    aot: true,
+    progress: options.progress,
+    budgets: [],
+    assets: [],
+    scripts: [],
+    styles: [],
+    deleteOutputPath: false,
+    extractLicenses: false,
+    subresourceIntegrity: false,
+    outputHashing: OutputHashing.None,
+    namedChunks: true,
+  };
+  const { config, projectRoot } = await generateBrowserWebpackConfigFromContext(
+    builderOptions,
     context,
     (wco) => {
       if (wco.tsConfig.options.enableIvy === false) {
@@ -262,7 +263,7 @@ export async function execute(
     (await transforms?.webpackConfiguration?.(config)) || config,
     context,
     {
-      logging: createWebpackLoggingCallback(false, context.logger),
+      logging: createWebpackLoggingCallback(builderOptions, context.logger),
       webpackFactory: webpack,
     },
   ).toPromise();

packages/angular_devkit/build_angular/src/webpack/utils/stats.ts

@@ -11,8 +11,11 @@ import { logging, tags } from '@angular-devkit/core';
 import * as path from 'path';
 import * as textTable from 'text-table';
 import { Configuration, StatsCompilation } from 'webpack';
+import { Schema as BrowserBuilderOptions } from '../../browser/schema';
 import { colors as ansiColors, removeColor } from '../../utils/color';
 import { getWebpackStatsConfig } from '../configs/stats';
+import { markAsyncChunksNonInitial } from './async-chunks';
+import { normalizeExtraEntryPoints } from './helpers';
 
 export function formatSize(size: number): string {
   if (size <= 0) {
@@ -325,15 +328,27 @@ export function statsHasWarnings(json: StatsCompilation): boolean {
 }
 
 export function createWebpackLoggingCallback(
-  verbose: boolean,
+  options: BrowserBuilderOptions,
   logger: logging.LoggerApi,
 ): WebpackLoggingCallback {
+  const { verbose = false, scripts = [], styles = [] } = options;
+  const extraEntryPoints = [
+    ...normalizeExtraEntryPoints(styles, 'styles'),
+    ...normalizeExtraEntryPoints(scripts, 'scripts'),
+  ];
+
   return (stats, config) => {
     if (verbose) {
       logger.info(stats.toString(config.stats));
     }
 
-    webpackStatsLogger(logger, stats.toJson(getWebpackStatsConfig(false)), config);
+    const rawStats = stats.toJson(getWebpackStatsConfig(false));
+    const webpackStats = {
+      ...rawStats,
+      chunks: markAsyncChunksNonInitial(rawStats, extraEntryPoints),
+    };
+
+    webpackStatsLogger(logger, webpackStats, config);
   };
 }