fix(@angular/cli): fix asset watching

https://github.com/kevlened/copy-webpack-plugin is now used instead of the custom plugin, it has since implemented the features we needed.

Fix angular#7521

Author: filipesilva

package-lock.json

@@ -44,10 +44,12 @@
     "@angular-devkit/build-optimizer": "~0.0.15",
     "@angular-devkit/schematics": "~0.0.18",
     "@schematics/angular": "~0.0.30",
+    "@types/copy-webpack-plugin": "^4.0.0",
     "autoprefixer": "^6.5.3",
     "chalk": "^2.0.1",
     "circular-dependency-plugin": "^3.0.0",
     "common-tags": "^1.3.1",
+    "copy-webpack-plugin": "^4.0.1",
     "core-object": "^3.1.0",
     "css-loader": "^0.28.1",
     "cssnano": "^3.10.0",

package.json

@@ -1,9 +1,10 @@
 import * as webpack from 'webpack';
 import * as path from 'path';
-import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
+import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import { NamedLazyChunksWebpackPlugin } from '../../plugins/named-lazy-chunks-webpack-plugin';
 import { InsertConcatAssetsWebpackPlugin } from '../../plugins/insert-concat-assets-webpack-plugin';
-import { extraEntryParser, getOutputHashFormat } from './utils';
+import { extraEntryParser, getOutputHashFormat, AssetPattern } from './utils';
+import { isDirectory } from '../../utilities/is-directory';
 import { WebpackConfigOptions } from '../webpack-config';
 
 const ConcatPlugin = require('webpack-concat-plugin');
@@ -84,10 +85,37 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
 
   // process asset entries
   if (appConfig.assets) {
-    extraPlugins.push(new GlobCopyWebpackPlugin({
-      patterns: appConfig.assets,
-      globOptions: { cwd: appRoot, dot: true, ignore: '**/.gitkeep' }
-    }));
+    extraPlugins.push(new CopyWebpackPlugin(
+      appConfig.assets.map((asset: string | AssetPattern) => {
+        // Convert all string assets to object notation.
+        asset = typeof asset === 'string' ? { glob: asset } : asset;
+        // Add defaults.
+        // Input is always resolved relative to the appRoot.
+        asset.input = path.resolve(appRoot, asset.input || '');
+        asset.output = asset.output || '';
+        asset.glob = asset.glob || '';
+
+        // Ensure trailing slash.
+        if (isDirectory(path.resolve(asset.input))) {
+          asset.input += '/';
+        }
+
+        // Convert dir patterns to globs.
+        if (isDirectory(path.resolve(asset.input, asset.glob))) {
+          asset.glob = asset.glob + '/**/*';
+        }
+
+        return {
+          context: asset.input,
+          to: asset.output,
+          from: {
+            glob: asset.glob,
+            dot: true
+          }
+        };
+      }),
+      { ignore: ['.gitkeep'] }
+    ));
   }
 
   if (buildOptions.progress) {

packages/@angular/cli/models/webpack-configs/common.ts

@@ -2,11 +2,11 @@ import * as path from 'path';
 import * as webpack from 'webpack';
 import * as fs from 'fs';
 import * as semver from 'semver';
+import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import { stripIndent } from 'common-tags';
 import { LicenseWebpackPlugin } from 'license-webpack-plugin';
 import { PurifyPlugin } from '@angular-devkit/build-optimizer';
 import { StaticAssetPlugin } from '../../plugins/static-asset';
-import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
 import { WebpackConfigOptions } from '../webpack-config';
 
 
@@ -58,16 +58,10 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
       `);
     }
 
-    extraPlugins.push(new GlobCopyWebpackPlugin({
-      patterns: [
-        'ngsw-manifest.json',
-        {glob: 'ngsw-manifest.json', input: path.resolve(projectRoot, appConfig.root), output: ''}
-      ],
-      globOptions: {
-        cwd: projectRoot,
-        optional: true,
-      },
-    }));
+    extraPlugins.push(new CopyWebpackPlugin([{
+      context: path.resolve(projectRoot, appConfig.root),
+      from: { glob: 'ngsw-manifest.json', }
+    }]));
 
     // Load the Webpack plugin for manifest generation and install it.
     const AngularServiceWorkerPlugin = require('@angular/service-worker/build/webpack')

packages/@angular/cli/models/webpack-configs/production.ts

@@ -87,3 +87,9 @@ export function getOutputHashFormat(option: string, length = 20): HashFormat {
   /* tslint:enable:max-line-length */
   return hashFormats[option] || hashFormats['none'];
 }
+
+export interface AssetPattern {
+  glob: string;
+  input?: string;
+  output?: string;
+}

packages/@angular/cli/models/webpack-configs/utils.ts

@@ -36,6 +36,7 @@
     "chalk": "^2.0.1",
     "circular-dependency-plugin": "^3.0.0",
     "common-tags": "^1.3.1",
+    "copy-webpack-plugin": "^4.0.1",
     "core-object": "^3.1.0",
     "css-loader": "^0.28.1",
     "cssnano": "^3.10.0",

packages/@angular/cli/package.json

@@ -4,7 +4,8 @@ import * as glob from 'glob';
 import * as webpack from 'webpack';
 const webpackDevMiddleware = require('webpack-dev-middleware');
 
-import { Pattern } from './glob-copy-webpack-plugin';
+import { AssetPattern } from '../models/webpack-configs/utils';
+import { isDirectory } from '../utilities/is-directory';
 import { WebpackTestConfig, WebpackTestOptions } from '../models/webpack-test-config';
 import { KarmaWebpackThrowError } from './karma-webpack-throw-error';
 
@@ -22,14 +23,6 @@ const getAppFromConfig = require('../utilities/app-utils').getAppFromConfig;
 let blocked: any[] = [];
 let isBlocked = false;
 
-function isDirectory(path: string) {
-  try {
-    return fs.statSync(path).isDirectory();
-  } catch (_) {
-    return false;
-  }
-}
-
 // Add files to the Karma files array.
 function addKarmaFiles(files: any[], newFiles: any[], prepend = false) {
   const defaults = {
@@ -82,7 +75,7 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
   // Add assets. This logic is mimics the one present in GlobCopyWebpackPlugin.
   if (appConfig.assets) {
     config.proxies = config.proxies || {};
-    appConfig.assets.forEach((pattern: Pattern) => {
+    appConfig.assets.forEach((pattern: AssetPattern) => {
       // Convert all string patterns to Pattern type.
       pattern = typeof pattern === 'string' ? { glob: pattern } : pattern;
       // Add defaults.

packages/@angular/cli/plugins/glob-copy-webpack-plugin.ts

@@ -3,7 +3,6 @@
 module.exports = {
   BaseHrefWebpackPlugin:
     require('../lib/base-href-webpack/base-href-webpack-plugin').BaseHrefWebpackPlugin,
-  GlobCopyWebpackPlugin: require('../plugins/glob-copy-webpack-plugin').GlobCopyWebpackPlugin,
   SuppressExtractedTextChunksWebpackPlugin:
     require('../plugins/suppress-entry-chunks-webpack-plugin')
       .SuppressExtractedTextChunksWebpackPlugin,

packages/@angular/cli/plugins/karma.ts

@@ -77,15 +77,6 @@ class JsonWebpackSerializer {
     }
   }
 
-  private _globCopyWebpackPluginSerialize(value: any): any {
-    let patterns = value.options.patterns;
-    let globOptions = value.options.globOptions;
-    return {
-      patterns,
-      globOptions: this._globReplacer(globOptions)
-    };
-  }
-
   private _insertConcatAssetsWebpackPluginSerialize(value: any): any {
     return value.entryNames;
   }
@@ -189,10 +180,6 @@ class JsonWebpackSerializer {
         case angularCliPlugins.SuppressExtractedTextChunksWebpackPlugin:
           this._addImport('@angular/cli/plugins/webpack', plugin.constructor.name);
           break;
-        case angularCliPlugins.GlobCopyWebpackPlugin:
-          args = this._globCopyWebpackPluginSerialize(plugin);
-          this._addImport('@angular/cli/plugins/webpack', 'GlobCopyWebpackPlugin');
-          break;
         case angularCliPlugins.InsertConcatAssetsWebpackPlugin:
           args = this._insertConcatAssetsWebpackPluginSerialize(plugin);
           this._addImport('@angular/cli/plugins/webpack', 'InsertConcatAssetsWebpackPlugin');
@@ -356,12 +343,6 @@ class JsonWebpackSerializer {
     });
   }
 
-  private _globReplacer(value: any) {
-    return Object.assign({}, value, {
-      cwd: this._relativePath('process.cwd()', path.relative(this._root, value.cwd))
-    });
-  }
-
   private _replacer(_key: string, value: any) {
     if (value === undefined) {
       return value;
@@ -538,6 +519,7 @@ export default Task.extend({
           'url-loader',
           'circular-dependency-plugin',
           'webpack-concat-plugin',
+          'copy-webpack-plugin',
         ].forEach((packageName: string) => {
           packageJson['devDependencies'][packageName] = ourPackageJson['dependencies'][packageName];
         });

packages/@angular/cli/plugins/webpack.js

@@ -0,0 +1,9 @@
+import * as fs from 'fs';
+
+export function isDirectory(path: string) {
+  try {
+    return fs.statSync(path).isDirectory();
+  } catch (_) {
+    return false;
+  }
+}