refactor(@ngtools/webpack): add webpack diagnostic helpers

Author: clydin

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -79,7 +79,9 @@ import {
   NodeWatchFileSystemInterface,
   NormalModuleFactoryRequest,
 } from './webpack';
+import { addError, addWarning } from './webpack-diagnostics';
 import { createWebpackInputHost } from './webpack-input-host';
+import { isWebpackFiveOrHigher } from './webpack-version';
 
 export class AngularCompilerPlugin {
   private _options: AngularCompilerPluginOptions;
@@ -117,8 +119,8 @@ export class AngularCompilerPlugin {
   private _firstRun = true;
   private _donePromise: Promise<void> | null = null;
   private _normalizedLocale: string | null = null;
-  private _warnings: (string | Error)[] = [];
-  private _errors: (string | Error)[] = [];
+  private _warnings: string[] = [];
+  private _errors: string[] = [];
   private _contextElementDependencyConstructor!: ContextElementDependencyConstructor;
 
   // TypeChecker process.
@@ -270,24 +272,22 @@ export class AngularCompilerPlugin {
     if (this._discoverLazyRoutes === false && this.options.additionalLazyModuleResources
       && this.options.additionalLazyModuleResources.length > 0) {
       this._warnings.push(
-        new Error(`Lazy route discovery is disabled but additional Lazy Module Resources were`
-          + ` provided. These will be ignored.`),
+        `Lazy route discovery is disabled but additional Lazy Module Resources were` +
+          ` provided. These will be ignored.`,
       );
     }
 
     if (this._compilerOptions.strictMetadataEmit) {
       this._warnings.push(
-        new Error(
-          `Using Angular compiler option 'strictMetadataEmit' for applications might cause undefined behavior.`,
-        ),
+        `Using Angular compiler option 'strictMetadataEmit' for applications might cause undefined behavior.`,
       );
     }
 
     if (this._discoverLazyRoutes === false && this.options.additionalLazyModules
       && Object.keys(this.options.additionalLazyModules).length > 0) {
       this._warnings.push(
-        new Error(`Lazy route discovery is disabled but additional lazy modules were provided.`
-          + `These will be ignored.`),
+        `Lazy route discovery is disabled but additional lazy modules were provided.` +
+          `These will be ignored.`,
       );
     }
 
@@ -544,9 +544,9 @@ export class AngularCompilerPlugin {
           if (this._lazyRoutes[moduleKey] !== modulePath) {
             // Found a duplicate, this is an error.
             this._warnings.push(
-              new Error(`Duplicated path in loadChildren detected during a rebuild. `
-                + `We will take the latest version detected and override it to save rebuild time. `
-                + `You should perform a full build to validate that your routes don't overlap.`),
+              `Duplicated path in loadChildren detected during a rebuild. ` +
+                `We will take the latest version detected and override it to save rebuild time. ` +
+                `You should perform a full build to validate that your routes don't overlap.`,
             );
           }
         } else {
@@ -679,9 +679,10 @@ export class AngularCompilerPlugin {
     // Anything that remains is unused, because it wasn't referenced directly or transitively
     // on the files in the compilation.
     for (const fileName of unusedSourceFileNames) {
-      compilation.warnings.push(
+      addWarning(
+        compilation,
         `${fileName} is part of the TypeScript compilation but it's unused.\n` +
-        `Add only entry points to the 'files' or 'include' properties in your tsconfig.`,
+          `Add only entry points to the 'files' or 'include' properties in your tsconfig.`,
       );
       this._unusedFiles.add(fileName);
       // Remove the truly unused from the type dep list.
@@ -965,7 +966,9 @@ export class AngularCompilerPlugin {
               }
             }
 
-            return request;
+            if (!isWebpackFiveOrHigher()) {
+              return request;
+            }
           },
         );
       });
@@ -1010,16 +1013,16 @@ export class AngularCompilerPlugin {
       await this._update();
       this.pushCompilationErrors(compilation);
     } catch (err) {
-      compilation.errors.push(err);
+      addError(compilation, err.message || err);
       this.pushCompilationErrors(compilation);
     }
 
     timeEnd('AngularCompilerPlugin._make');
   }
 
   private pushCompilationErrors(compilation: compilation.Compilation) {
-    compilation.errors.push(...this._errors);
-    compilation.warnings.push(...this._warnings);
+    this._errors.forEach((error) => addError(compilation, error));
+    this._warnings.forEach((warning) => addWarning(compilation, warning));
     this._errors = [];
     this._warnings = [];
   }
@@ -1160,7 +1163,7 @@ export class AngularCompilerPlugin {
     // Report any diagnostics.
     reportDiagnostics(
       diagnostics,
-      msg => this._errors.push(new Error(msg)),
+      msg => this._errors.push(msg),
       msg => this._warnings.push(msg),
     );
 

packages/ngtools/webpack/src/webpack-diagnostics.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 * as webpack from 'webpack';
+import { isWebpackFiveOrHigher } from './webpack-version';
+
+const WebpackError = require('webpack/lib/WebpackError');
+
+export function addWarning(compilation: webpack.compilation.Compilation, message: string): void {
+  if (isWebpackFiveOrHigher()) {
+    compilation.warnings.push(new WebpackError(message));
+  } else {
+    // Allows building with either Webpack 4 or 5+ types
+    // tslint:disable-next-line: no-any
+    compilation.warnings.push(message as any);
+  }
+}
+
+export function addError(compilation: webpack.compilation.Compilation, message: string): void {
+  if (isWebpackFiveOrHigher()) {
+    compilation.errors.push(new WebpackError(message));
+  } else {
+    // Allows building with either Webpack 4 or 5+ types
+    // tslint:disable-next-line: no-any
+    compilation.errors.push(new Error(message) as any);
+  }
+}

packages/ngtools/webpack/src/webpack-version.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 * as webpack from 'webpack';
+
+let cachedIsWebpackFiveOrHigher: boolean | undefined;
+export function isWebpackFiveOrHigher(): boolean {
+  if (cachedIsWebpackFiveOrHigher === undefined) {
+    cachedIsWebpackFiveOrHigher = false;
+    if (typeof webpack.version === 'string') {
+      const versionParts = webpack.version.split('.');
+      if (versionParts[0] && Number(versionParts[0]) >= 5) {
+        cachedIsWebpackFiveOrHigher = true;
+      }
+    }
+  }
+
+  return cachedIsWebpackFiveOrHigher;
+}