fix(@angular-devkit/build-angular): update copy-webpack-plugin to version 6

Fixes #17858

Author: alan-agius4

integration/angular_cli/yarn.lock

@@ -32,7 +32,7 @@
     cacache "15.0.0"
     caniuse-lite "^1.0.30001032"
     circular-dependency-plugin "5.2.0"
-    copy-webpack-plugin "5.1.1"
+    copy-webpack-plugin "6.0.1"
     core-js "3.6.4"
     cssnano "4.1.10"
     file-loader "6.0.0"

package.json

@@ -97,7 +97,7 @@
     "@types/babel__template": "7.0.2",
     "@types/browserslist": "^4.4.0",
     "@types/caniuse-lite": "^1.0.0",
-    "@types/copy-webpack-plugin": "^5.0.0",
+    "@types/copy-webpack-plugin": "^6.0.0",
     "@types/cssnano": "^4.0.0",
     "@types/debug": "^4.1.2",
     "@types/express": "^4.16.0",
@@ -136,7 +136,7 @@
     "common-tags": "^1.8.0",
     "conventional-changelog": "^3.0.0",
     "conventional-commits-parser": "^3.0.0",
-    "copy-webpack-plugin": "5.1.1",
+    "copy-webpack-plugin": "6.0.2",
     "core-js": "3.6.4",
     "css-loader": "3.5.2",
     "cssnano": "4.1.10",

packages/angular_devkit/build_angular/package.json

@@ -26,7 +26,7 @@
     "cacache": "15.0.3",
     "caniuse-lite": "^1.0.30001032",
     "circular-dependency-plugin": "5.2.0",
-    "copy-webpack-plugin": "5.1.1",
+    "copy-webpack-plugin": "6.0.2",
     "core-js": "3.6.4",
     "css-loader": "3.5.3",
     "cssnano": "4.1.10",

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -255,34 +255,40 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   if (buildOptions.assets.length) {
     const copyWebpackPluginPatterns = buildOptions.assets.map((asset: AssetPatternClass) => {
       // Resolve input paths relative to workspace root and add slash at the end.
-      asset.input = path.resolve(root, asset.input).replace(/\\/g, '/');
-      asset.input = asset.input.endsWith('/') ? asset.input : asset.input + '/';
-      asset.output = asset.output.endsWith('/') ? asset.output : asset.output + '/';
-
-      if (asset.output.startsWith('..')) {
-        const message = 'An asset cannot be written to a location outside of the output path.';
-        throw new Error(message);
+      // tslint:disable-next-line: prefer-const
+      let { input, output, ignore = [], glob } = asset;
+      input = path.resolve(root, input).replace(/\\/g, '/');
+      input = input.endsWith('/') ? input : input + '/';
+      output = output.endsWith('/') ? output : output + '/';
+
+      if (output.startsWith('..')) {
+        throw new Error('An asset cannot be written to a location outside of the output path.');
       }
 
       return {
-        context: asset.input,
+        context: input,
         // Now we remove starting slash to make Webpack place it from the output root.
-        to: asset.output.replace(/^\//, ''),
-        ignore: asset.ignore,
-        from: {
-          glob: asset.glob,
+        to: output.replace(/^\//, ''),
+        from: glob,
+        noErrorOnMissing: true,
+        globOptions: {
           dot: true,
+          ignore: [
+            '.gitkeep',
+            '**/.DS_Store',
+            '**/Thumbs.db',
+            // Negate patterns needs to be absolute because copy-webpack-plugin uses absolute globs which
+            // causes negate patterns not to match.
+            // See: https://github.com/webpack-contrib/copy-webpack-plugin/issues/498#issuecomment-639327909
+            ...ignore,
+          ].map(i => path.posix.join(input, i)),
         },
       };
     });
 
-    const copyWebpackPluginOptions = { ignore: ['.gitkeep', '**/.DS_Store', '**/Thumbs.db'] };
-
-    const copyWebpackPluginInstance = new CopyWebpackPlugin(
-      copyWebpackPluginPatterns,
-      copyWebpackPluginOptions,
-    );
-    extraPlugins.push(copyWebpackPluginInstance);
+    extraPlugins.push(new CopyWebpackPlugin({
+      patterns: copyWebpackPluginPatterns,
+    }));
   }
 
   if (buildOptions.progress) {

packages/angular_devkit/build_angular/src/browser/specs/assets_spec.ts

@@ -94,9 +94,9 @@ describe('Browser Builder assets', () => {
     const output = await run.result as BrowserBuilderOutput;
     expect(output.success).toBe(true);
 
-    expect(host.scopedSync().exists(normalize('./dist/folder/asset.txt'))).toBe(true);
-    expect(host.scopedSync().exists(normalize('./dist/folder/asset-ignored.txt'))).toBe(false);
-    expect(host.scopedSync().exists(normalize('./dist/folder/.gitkeep'))).toBe(false);
+    expect(host.scopedSync().exists(normalize('./dist/folder/asset.txt'))).toBe(true, `asset.txt doesn't exist.`);
+    expect(host.scopedSync().exists(normalize('./dist/folder/asset-ignored.txt'))).toBe(false, 'asset-ignored.txt exists.');
+    expect(host.scopedSync().exists(normalize('./dist/folder/.gitkeep'))).toBe(false, '.gitkeep exists.');
 
     await run.stop();
   });