refactor: use addWarning and addError helpers to push Webpack diagnostics

With this change we replace all usage of `compilation.errors `and `compilation.warnings.push` with `addError` and `addWarning` respectively.

Also, we update the helpers in build-angular to use `WebpackError` from the current compilation to avoid mismatching instances.

Author: alan-agius4

Diff for: packages/angular_devkit/build_angular/src/utils/webpack-diagnostics.ts

@@ -6,12 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { Compilation, WebpackError } from 'webpack';
+import type { Compilation } from 'webpack';
 
 export function addWarning(compilation: Compilation, message: string): void {
-  compilation.warnings.push(new WebpackError(message));
+  compilation.warnings.push(new compilation.compiler.webpack.WebpackError(message));
 }
 
 export function addError(compilation: Compilation, message: string): void {
-  compilation.errors.push(new WebpackError(message));
+  compilation.errors.push(new compilation.compiler.webpack.WebpackError(message));
 }

Diff for: packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -9,10 +9,11 @@
 import * as fs from 'fs';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import * as path from 'path';
-import { Configuration, RuleSetUseItem, WebpackError } from 'webpack';
+import type { Configuration, RuleSetUseItem } from 'webpack';
 import { StyleElement } from '../../builders/browser/schema';
 import { SassWorkerImplementation } from '../../sass/sass-service';
 import { WebpackConfigOptions } from '../../utils/build-options';
+import { addWarning } from '../../utils/webpack-diagnostics';
 import {
   AnyComponentStyleBudgetChecker,
   PostcssCliResources,
@@ -112,7 +113,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
 
       compiler.hooks.afterCompile.tap('sass-worker', (compilation) => {
         for (const message of sassTildeUsageMessage) {
-          compilation.warnings.push(new WebpackError(message));
+          addWarning(compilation, message);
         }
 
         sassTildeUsageMessage.clear();

Diff for: packages/angular_devkit/build_angular/src/webpack/plugins/javascript-optimizer-plugin.ts

@@ -7,10 +7,10 @@
  */
 
 import Piscina from 'piscina';
-import { ScriptTarget } from 'typescript';
 import type { Compiler, sources } from 'webpack';
 import { maxWorkers } from '../../utils/environment-options';
 import { transformSupportedBrowsersToTargets } from '../../utils/esbuild-targets';
+import { addError } from '../../utils/webpack-diagnostics';
 import { EsbuildExecutor } from './esbuild-executor';
 import type { OptimizeRequestOptions } from './javascript-optimizer-worker';
 
@@ -220,10 +220,10 @@ export class JavaScriptOptimizerPlugin {
                       });
                     },
                     (error) => {
-                      const optimizationError = new compiler.webpack.WebpackError(
+                      addError(
+                        compilation,
                         `Optimization error [${name}]: ${error.stack || error.message}`,
                       );
-                      compilation.errors.push(optimizationError);
                     },
                   ),
               );

Diff for: packages/angular_devkit/build_angular/src/webpack/plugins/transfer-size-plugin.ts

@@ -9,6 +9,7 @@
 import { promisify } from 'util';
 import { Compiler } from 'webpack';
 import { brotliCompress } from 'zlib';
+import { addWarning } from '../../utils/webpack-diagnostics';
 
 const brotliCompressAsync = promisify(brotliCompress);
 
@@ -49,10 +50,9 @@ export class TransferSizePlugin {
                   );
                 })
                 .catch((error) => {
-                  compilation.warnings.push(
-                    new compilation.compiler.webpack.WebpackError(
-                      `Unable to calculate estimated transfer size for '${assetName}'. Reason: ${error.message}`,
-                    ),
+                  addWarning(
+                    compilation,
+                    `Unable to calculate estimated transfer size for '${assetName}'. Reason: ${error.message}`,
                   );
                 }),
             );

Diff for: packages/ngtools/webpack/src/ivy/plugin.ts

@@ -189,12 +189,11 @@ export class AngularWebpackPlugin {
       try {
         this.setupCompilation(compilation, compilationState);
       } catch (error) {
-        compilation.errors.push(
-          new WebpackError(
-            `Failed to initialize Angular compilation - ${
-              error instanceof Error ? error.message : error
-            }`,
-          ),
+        addError(
+          compilation,
+          `Failed to initialize Angular compilation - ${
+            error instanceof Error ? error.message : error
+          }`,
         );
       }
     });

Diff for: packages/ngtools/webpack/src/resource_loader.ts

@@ -10,6 +10,7 @@ import assert from 'assert';
 import * as path from 'path';
 import * as vm from 'vm';
 import type { Asset, Compilation } from 'webpack';
+import { addError } from './ivy/diagnostics';
 import { normalizePath } from './ivy/paths';
 import {
   CompilationWithInlineAngularResource,
@@ -212,7 +213,7 @@ export class WebpackResourceLoader {
           } catch (error) {
             assert(error instanceof Error, 'catch clause variable is not an Error instance');
             // Use compilation errors, as otherwise webpack will choke
-            compilation.errors.push(new WebpackError(error.message));
+            addError(compilation, error.message);
           }
         });
       },