refactor(@angular-devkit/build-angular): use common logging function for webpack stats

With this change we align all builders to have the same output structure.

Author: alan-agius4

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/stats.ts

@@ -7,7 +7,8 @@
  */
 // tslint:disable
 // TODO: cleanup this file, it's copied as is from Angular CLI.
-import { tags, terminal } from '@angular-devkit/core';
+import { logging, tags, terminal } from '@angular-devkit/core';
+import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
 import * as path from 'path';
 
 
@@ -139,3 +140,25 @@ export function statsHasWarnings(json: any): boolean {
   return json.warnings.filter(ERRONEOUS_WARNINGS_FILTER).length ||
     !!json.children?.some((c: any) => c.warnings.filter(ERRONEOUS_WARNINGS_FILTER).length);
 }
+
+export function createWebpackLoggingCallback(
+  verbose: boolean,
+  logger: logging.LoggerApi,
+): WebpackLoggingCallback {
+  return (stats, config) => {
+    // config.stats contains our own stats settings, added during buildWebpackConfig().
+    const json = stats.toJson(config.stats);
+    if (verbose) {
+      logger.info(stats.toString(config.stats));
+    } else {
+      logger.info(statsToString(json, config.stats));
+    }
+
+    if (statsHasWarnings(json)) {
+      logger.warn(statsWarningsToString(json, config.stats));
+    }
+    if (statsHasErrors(json)) {
+      logger.error(statsErrorsToString(json, config.stats));
+    }
+  };
+}

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -7,7 +7,7 @@
  */
 import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
 import { EmittedFiles, WebpackLoggingCallback, runWebpack } from '@angular-devkit/build-webpack';
-import { join, json, logging, normalize, tags, virtualFs } from '@angular-devkit/core';
+import { join, json, normalize, tags, virtualFs } from '@angular-devkit/core';
 import { NodeJsSyncHost } from '@angular-devkit/core/node';
 import * as fs from 'fs';
 import * as path from 'path';
@@ -36,12 +36,12 @@ import {
 import { readTsconfig } from '../angular-cli-files/utilities/read-tsconfig';
 import { augmentAppWithServiceWorker } from '../angular-cli-files/utilities/service-worker';
 import {
+  createWebpackLoggingCallback,
   generateBuildStats,
   generateBundleStats,
   statsErrorsToString,
   statsHasErrors,
   statsHasWarnings,
-  statsToString,
   statsWarningsToString,
 } from '../angular-cli-files/utilities/stats';
 import { ExecutionTransformer } from '../transforms';
@@ -88,28 +88,6 @@ export type BrowserBuilderOutput = json.JsonObject &
     outputPath: string;
   };
 
-export function createBrowserLoggingCallback(
-  verbose: boolean,
-  logger: logging.LoggerApi,
-): WebpackLoggingCallback {
-  return (stats, config) => {
-    // config.stats contains our own stats settings, added during buildWebpackConfig().
-    const json = stats.toJson(config.stats);
-    if (verbose) {
-      logger.info(stats.toString(config.stats));
-    } else {
-      logger.info(statsToString(json, config.stats));
-    }
-
-    if (statsHasWarnings(json)) {
-      logger.warn(statsWarningsToString(json, config.stats));
-    }
-    if (statsHasErrors(json)) {
-      logger.error(statsErrorsToString(json, config.stats));
-    }
-  };
-}
-
 // todo: the below should be cleaned once dev-server support the new i18n
 interface ConfigFromContextReturn {
   config: webpack.Configuration;
@@ -284,7 +262,7 @@ export function buildWebpackBrowser(
           transforms.logging ||
           (useBundleDownleveling
             ? () => {}
-            : createBrowserLoggingCallback(!!options.verbose, context.logger)),
+            : createWebpackLoggingCallback(!!options.verbose, context.logger)),
       }).pipe(
         // tslint:disable-next-line: no-big-function
         concatMap(async buildEvent => {

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

@@ -28,7 +28,8 @@ import { checkPort } from '../angular-cli-files/utilities/check-port';
 import { IndexHtmlTransform } from '../angular-cli-files/utilities/index-file/write-index-html';
 import { generateEntryPoints } from '../angular-cli-files/utilities/package-chunk-sort';
 import { readTsconfig } from '../angular-cli-files/utilities/read-tsconfig';
-import { buildBrowserWebpackConfigFromContext, createBrowserLoggingCallback } from '../browser';
+import { createWebpackLoggingCallback } from '../angular-cli-files/utilities/stats';
+import { buildBrowserWebpackConfigFromContext } from '../browser';
 import { Schema as BrowserBuilderSchema } from '../browser/schema';
 import { ExecutionTransformer } from '../transforms';
 import { BuildBrowserFeatures, normalizeOptimization } from '../utils';
@@ -87,7 +88,7 @@ export function serveWebpackBrowser(
   const host = new NodeJsSyncHost();
 
   const loggingFn =
-    transforms.logging || createBrowserLoggingCallback(!!options.verbose, context.logger);
+    transforms.logging || createWebpackLoggingCallback(!!options.verbose, context.logger);
 
   async function setup(): Promise<{
     browserOptions: json.JsonObject & BrowserBuilderSchema;

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

@@ -10,7 +10,7 @@ import {
   createBuilder,
   targetFromTargetString,
 } from '@angular-devkit/architect';
-import { BuildResult, WebpackLoggingCallback, runWebpack } from '@angular-devkit/build-webpack';
+import { BuildResult, runWebpack } from '@angular-devkit/build-webpack';
 import { JsonObject } from '@angular-devkit/core';
 import type { ɵParsedMessage as LocalizeMessage } from '@angular/localize';
 import * as fs from 'fs';
@@ -23,7 +23,7 @@ import {
   getStatsConfig,
   getStylesConfig,
 } from '../angular-cli-files/models/webpack-configs';
-import { statsErrorsToString, statsHasErrors, statsHasWarnings, statsWarningsToString } from '../angular-cli-files/utilities/stats';
+import { createWebpackLoggingCallback } from '../angular-cli-files/utilities/stats';
 import { Schema as BrowserBuilderOptions } from '../browser/schema';
 import { ExecutionTransformer } from '../transforms';
 import { createI18nOptions } from '../utils/i18n-options';
@@ -218,23 +218,11 @@ export async function execute(
     }
   }
 
-  const logging: WebpackLoggingCallback = (stats, config) => {
-    const json = stats.toJson({ errors: true, warnings: true });
-
-    if (statsHasWarnings(json)) {
-      context.logger.warn(statsWarningsToString(json, config.stats));
-    }
-
-    if (statsHasErrors(json)) {
-      context.logger.error(statsErrorsToString(json, config.stats));
-    }
-  };
-
   const webpackResult = await runWebpack(
     (await transforms?.webpackConfiguration?.(config)) || config,
     context,
     {
-      logging,
+      logging: createWebpackLoggingCallback(false, context.logger),
       webpackFactory: await import('webpack'),
     },
   ).toPromise();

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

@@ -21,6 +21,7 @@ import {
   getStylesConfig,
 } from '../angular-cli-files/models/webpack-configs';
 import { readTsconfig } from '../angular-cli-files/utilities/read-tsconfig';
+import { createWebpackLoggingCallback } from '../angular-cli-files/utilities/stats';
 import { ExecutionTransformer } from '../transforms';
 import { NormalizedBrowserBuilderSchema, deleteOutputDir } from '../utils';
 import { i18nInlineEmittedFiles } from '../utils/i18n-inlining';
@@ -84,6 +85,7 @@ export function execute(
     concatMap(({ config, i18n }) => {
       return runWebpack(config, context, {
         webpackFactory: require('webpack') as typeof webpack,
+        logging: createWebpackLoggingCallback(!!options.verbose, context.logger),
       }).pipe(
         concatMap(async output => {
           const { emittedFiles = [], webpackStats } = output;