fix(@angular-devkit/build-webpack): fix karma asset paths

filipesilva · hansl · commit 8585533c14d8 · 2018-06-05T17:55:16.000-07:00
diff --git a/packages/angular_devkit/build_webpack/src/angular-cli-files/models/webpack-configs/common.ts b/packages/angular_devkit/build_webpack/src/angular-cli-files/models/webpack-configs/common.ts
@@ -91,9 +91,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
 
   // process asset entries
   if (appConfig.assets) {
-    const copyWebpackPluginPatterns = appConfig.assets.map((asset: string | AssetPattern) => {
-      // Convert all string assets to object notation.
-      asset = typeof asset === 'string' ? { glob: asset } : asset;
+    const copyWebpackPluginPatterns = appConfig.assets.map((asset: AssetPattern) => {
       // Add defaults.
       // Input is always resolved relative to the projectRoot.
       // TODO: add smart defaults to schema to use project root as default.
diff --git a/packages/angular_devkit/build_webpack/src/angular-cli-files/models/webpack-configs/utils.ts b/packages/angular_devkit/build_webpack/src/angular-cli-files/models/webpack-configs/utils.ts
@@ -99,6 +99,6 @@ export function getOutputHashFormat(option: string, length = 20): HashFormat {
 export interface AssetPattern {
   glob: string;
   input?: string;
-  output?: string;
-  allowOutsideOutDir?: boolean;
+  output: string;
+  allowOutsideOutDir: boolean;
 }
diff --git a/packages/angular_devkit/build_webpack/src/angular-cli-files/plugins/karma.ts b/packages/angular_devkit/build_webpack/src/angular-cli-files/plugins/karma.ts
@@ -8,7 +8,6 @@ import * as webpack from 'webpack';
 const webpackDevMiddleware = require('webpack-dev-middleware');
 
 import { AssetPattern } from '../models/webpack-configs/utils';
-import { isDirectory } from '../utilities/is-directory';
 import { KarmaWebpackFailureCb } from './karma-webpack-failure-cb';
 
 /**
@@ -50,7 +49,7 @@ function addKarmaFiles(files: any[], newFiles: any[], prepend = false) {
 
 const init: any = (config: any, emitter: any, customFileHandlers: any) => {
   const options = config.buildWebpack.options;
-  const projectRoot = config.buildWebpack.projectRoot;
+  const projectRoot = config.buildWebpack.projectRoot as string;
   successCb = config.buildWebpack.successCb;
   failureCb = config.buildWebpack.failureCb;
 
@@ -71,38 +70,26 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
     ], true);
   }
 
-  // Add assets. This logic is mimics the one present in GlobCopyWebpackPlugin.
+  // Add assets. This logic is mimics the one present in GlobCopyWebpackPlugin, but proxies
+  // asset requests to the Webpack server.
   if (options.assets) {
     config.proxies = config.proxies || {};
     options.assets.forEach((pattern: AssetPattern) => {
-      // Convert all string patterns to Pattern type.
-      pattern = typeof pattern === 'string' ? { glob: pattern } : pattern;
-      // Add defaults.
-      // Input is always resolved relative to the projectRoot.
-      pattern.input = path.resolve(projectRoot, pattern.input || '');
-      pattern.output = pattern.output || '';
-      pattern.glob = pattern.glob || '';
-
-      // Build karma file pattern.
-      const assetPath = path.join(pattern.input, pattern.glob);
-      const filePattern = isDirectory(assetPath) ? assetPath + '/**' : assetPath;
-      addKarmaFiles(config.files, [{ pattern: filePattern, included: false }]);
-
-      // The `files` entry serves the file from `/base/{asset.input}/{asset.glob}`.
-      // We need to add a URL rewrite that exposes the asset as `/{asset.output}/{asset.glob}`.
-      let relativePath: string, proxyPath: string;
-      if (fs.existsSync(assetPath)) {
-        relativePath = path.relative(config.basePath, assetPath);
+      // TODO: use smart defaults in schema to do this instead.
+      // Default input to be projectRoot.
+      pattern.input = pattern.input || projectRoot;
+
+      // Determine Karma proxy path.
+      let proxyPath: string;
+      if (fs.existsSync(path.join(pattern.input, pattern.glob))) {
         proxyPath = path.join(pattern.output, pattern.glob);
       } else {
         // For globs (paths that don't exist), proxy pattern.output to pattern.input.
-        relativePath = path.relative(config.basePath, pattern.input);
         proxyPath = path.join(pattern.output);
-
       }
       // Proxy paths must have only forward slashes.
       proxyPath = proxyPath.replace(/\\/g, '/');
-      config.proxies['/' + proxyPath] = '/base/' + relativePath;
+      config.proxies['/' + proxyPath] = '/_karma_webpack_/' + proxyPath;
     });
   }
 
diff --git a/packages/angular_devkit/build_webpack/src/karma/schema.json b/packages/angular_devkit/build_webpack/src/karma/schema.json
@@ -122,8 +122,7 @@
         },
         "input": {
           "type": "string",
-          "description": "The input path dir in which to apply 'glob'.",
-          "default": "./"
+          "description": "The input path dir in which to apply 'glob'."
         },
         "output": {
           "type": "string",
diff --git a/packages/angular_devkit/build_webpack/test/karma/assets_spec_large.ts b/packages/angular_devkit/build_webpack/test/karma/assets_spec_large.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import { tap } from 'rxjs/operators';
 import { host, karmaTargetSpec, runTargetSpec } from '../utils';
 
 
@@ -88,11 +89,12 @@ describe('Karma Builder assets', () => {
       assets: [
         { glob: 'glob-asset.txt' },
         { glob: 'output-asset.txt', output: 'output-folder' },
-        { glob: '**/*', input: 'folder', output: 'folder' },
+        { glob: '**/*', input: 'src/folder', output: 'folder' },
       ],
     };
 
     runTargetSpec(host, karmaTargetSpec, overrides).pipe(
+      tap(buildEvent => expect(buildEvent.success).toBe(true)),
     ).subscribe(undefined, done.fail, done);
   }, 45000);
 });

Original file line number	Diff line number	Diff line change
`@@ -99,6 +99,6 @@ export function getOutputHashFormat(option: string, length = 20): HashFormat {`
`99`	`99`	`export interface AssetPattern {`
`100`	`100`	`glob: string;`
`101`	`101`	`input?: string;`
`102`		`- output?: string;`
`103`		`- allowOutsideOutDir?: boolean;`
	`102`	`+ output: string;`
	`103`	`+ allowOutsideOutDir: boolean;`
`104`	`104`	`}`