fix(@angular-devkit/build-angular): update ScriptsWebpackPlugin to work with Webpack 5

Closes: #19550

Author: alan-agius4

packages/angular_devkit/build_angular/src/webpack/plugins/scripts-webpack-plugin.ts

@@ -35,30 +35,33 @@ function addDependencies(compilation: any, scripts: string[]): void {
     compilation.fileDependencies.add(script);
   }
 }
-
-function hook(compiler: any, action: (compilation: any, callback: (err?: Error) => void) => void) {
-  compiler.hooks.thisCompilation.tap('scripts-webpack-plugin', (compilation: any) => {
-    compilation.hooks.additionalAssets.tapAsync(
-      'scripts-webpack-plugin',
-      (callback: (err?: Error) => void) => action(compilation, callback),
-    );
-  });
-}
-
 export class ScriptsWebpackPlugin {
   private _lastBuildTime?: number;
   private _cachedOutput?: ScriptOutput;
 
   constructor(private options: Partial<ScriptsWebpackPluginOptions> = {}) { }
 
-  shouldSkip(compilation: any, scripts: string[]): boolean {
+  async shouldSkip(compilation: any, scripts: string[]): Promise<boolean> {
     if (this._lastBuildTime == undefined) {
       this._lastBuildTime = Date.now();
       return false;
     }
 
-    for (let i = 0; i < scripts.length; i++) {
-      const scriptTime = compilation.fileTimestamps.get(scripts[i]);
+    for (const script of scripts) {
+      const scriptTime = isWebpackFiveOrHigher()
+        ? await new Promise<number | undefined>((resolve, reject) => {
+          compilation.fileSystemInfo.getFileTimestamp(script, (error: unknown, entry: any) => {
+            if (error) {
+              reject(error);
+
+              return;
+            }
+
+            resolve(typeof entry !== 'string' ? entry.safeTime : undefined)
+          })
+        })
+        : compilation.fileTimestamps.get(script);
+
       if (!scriptTime || scriptTime > this._lastBuildTime) {
         this._lastBuildTime = Date.now();
         return false;
@@ -83,7 +86,12 @@ export class ScriptsWebpackPlugin {
     entrypoint.pushChunk(chunk);
     chunk.addGroup(entrypoint);
     compilation.entrypoints.set(this.options.name, entrypoint);
-    compilation.chunks.push(chunk);
+    if (isWebpackFiveOrHigher()) {
+      compilation.chunks.add(chunk);
+    } else {
+      compilation.chunks.push(chunk);
+    }
+
     compilation.assets[filename] = source;
   }
 
@@ -96,48 +104,47 @@ export class ScriptsWebpackPlugin {
       .filter(script => !!script)
       .map(script => path.resolve(this.options.basePath || '', script));
 
-    hook(compiler, (compilation, callback) => {
-      if (this.shouldSkip(compilation, scripts)) {
-        if (this._cachedOutput) {
-          this._insertOutput(compilation, this._cachedOutput, true);
-        }
-
-        addDependencies(compilation, scripts);
-        callback();
-
-        return;
-      }
-
-      const sourceGetters = scripts.map(fullPath => {
-        return new Promise<Source>((resolve, reject) => {
-          compilation.inputFileSystem.readFile(fullPath, (err: Error, data: Buffer) => {
-            if (err) {
-              reject(err);
-              return;
+    compiler.hooks.thisCompilation.tap('scripts-webpack-plugin', compilation => {
+      compilation.hooks.additionalAssets.tapPromise('scripts-webpack-plugin', async () => {
+          if (await this.shouldSkip(compilation, scripts)) {
+            if (this._cachedOutput) {
+              this._insertOutput(compilation, this._cachedOutput, true);
             }
 
-            const content = data.toString();
-
-            let source;
-            if (this.options.sourceMap) {
-              // TODO: Look for source map file (for '.min' scripts, etc.)
-
-              let adjustedPath = fullPath;
-              if (this.options.basePath) {
-                adjustedPath = path.relative(this.options.basePath, fullPath);
-              }
-              source = new OriginalSource(content, adjustedPath);
-            } else {
-              source = new RawSource(content);
-            }
-
-            resolve(source);
+            addDependencies(compilation, scripts);
+
+            return;
+          }
+
+          const sourceGetters = scripts.map(fullPath => {
+            return new Promise<Source>((resolve, reject) => {
+              compilation.inputFileSystem.readFile(fullPath, (err: Error, data: Buffer) => {
+                if (err) {
+                  reject(err);
+                  return;
+                }
+
+                const content = data.toString();
+
+                let source;
+                if (this.options.sourceMap) {
+                  // TODO: Look for source map file (for '.min' scripts, etc.)
+
+                  let adjustedPath = fullPath;
+                  if (this.options.basePath) {
+                    adjustedPath = path.relative(this.options.basePath, fullPath);
+                  }
+                  source = new OriginalSource(content, adjustedPath);
+                } else {
+                  source = new RawSource(content);
+                }
+
+                resolve(source);
+              });
+            });
           });
-        });
-      });
 
-      Promise.all(sourceGetters)
-        .then(sources => {
+          const sources = await Promise.all(sourceGetters);
           const concatSource = new ConcatSource();
           sources.forEach(source => {
             concatSource.add(source);
@@ -155,10 +162,7 @@ export class ScriptsWebpackPlugin {
           this._insertOutput(compilation, output);
           this._cachedOutput = output;
           addDependencies(compilation, scripts);
-
-          callback();
-        })
-        .catch((err: Error) => callback(err));
+        });
     });
   }
 }