feat(@angular/cli): use same webpack config for karma

Close #4851
Fix #3605
Fix #4850
Fix #4876

packages/@angular/cli/blueprints/ng2/files/karma.conf.js

@@ -29,7 +29,6 @@ module.exports = function (config) {
       fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './.angular-cli.json',
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage

packages/@angular/cli/models/webpack-config.ts

@@ -2,6 +2,7 @@ const webpackMerge = require('webpack-merge');
 import { CliConfig } from './config';
 import { BuildOptions } from './build-options';
 import {
+  getBrowserConfig,
   getCommonConfig,
   getDevConfig,
   getProdConfig,
@@ -20,6 +21,7 @@ export interface WebpackConfigOptions {
 
 export class NgCliWebpackConfig {
   public config: any;
+  public wco: WebpackConfigOptions;
   constructor(buildOptions: BuildOptions) {
 
     this.validateBuildOptions(buildOptions);
@@ -32,26 +34,29 @@ export class NgCliWebpackConfig {
     buildOptions = this.addTargetDefaults(buildOptions);
     buildOptions = this.mergeConfigs(buildOptions, appConfig);
 
-    const wco: WebpackConfigOptions = { projectRoot, buildOptions, appConfig };
+    this.wco = { projectRoot, buildOptions, appConfig };
+  }
 
+  public buildConfig() {
     let webpackConfigs = [
-      getCommonConfig(wco),
-      getStylesConfig(wco),
-      this.getTargetConfig(wco)
+      getCommonConfig(this.wco),
+      getBrowserConfig(this.wco),
+      getStylesConfig(this.wco),
+      this.getTargetConfig(this.wco)
     ];
 
-    if (appConfig.main || appConfig.polyfills) {
-      const typescriptConfigPartial = buildOptions.aot
-        ? getAotConfig(wco)
-        : getNonAotConfig(wco);
+    if (this.wco.appConfig.main || this.wco.appConfig.polyfills) {
+      const typescriptConfigPartial = this.wco.buildOptions.aot
+        ? getAotConfig(this.wco)
+        : getNonAotConfig(this.wco);
       webpackConfigs.push(typescriptConfigPartial);
     }
 
-    // add style config
     this.config = webpackMerge(webpackConfigs);
+    return this.config;
   }
 
-  getTargetConfig(webpackConfigOptions: WebpackConfigOptions): any {
+  public getTargetConfig(webpackConfigOptions: WebpackConfigOptions): any {
     switch (webpackConfigOptions.buildOptions.target) {
       case 'development':
         return getDevConfig(webpackConfigOptions);
@@ -61,14 +66,15 @@ export class NgCliWebpackConfig {
   }
 
   // Validate build options
-  private validateBuildOptions(buildOptions: BuildOptions) {
+  public validateBuildOptions(buildOptions: BuildOptions) {
+    buildOptions.target = buildOptions.target || 'development';
     if (buildOptions.target !== 'development' && buildOptions.target !== 'production') {
       throw new Error("Invalid build target. Only 'development' and 'production' are available.");
     }
   }
 
   // Fill in defaults for build targets
-  private addTargetDefaults(buildOptions: BuildOptions) {
+  public addTargetDefaults(buildOptions: BuildOptions) {
     const targetDefaults: any = {
       development: {
         environment: 'dev',
@@ -89,7 +95,7 @@ export class NgCliWebpackConfig {
   }
 
   // Fill in defaults from .angular-cli.json
-  private mergeConfigs(buildOptions: BuildOptions, appConfig: any) {
+  public mergeConfigs(buildOptions: BuildOptions, appConfig: any) {
     const mergeableOptions = {
       outputPath: appConfig.outDir,
       deployUrl: appConfig.deployUrl
@@ -98,7 +104,7 @@ export class NgCliWebpackConfig {
     return Object.assign({}, mergeableOptions, buildOptions);
   }
 
-  private addAppConfigDefaults(appConfig: any) {
+  public addAppConfigDefaults(appConfig: any) {
     const appConfigDefaults: any = {
       scripts: [],
       styles: []

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

@@ -0,0 +1,51 @@
+import * as webpack from 'webpack';
+import * as path from 'path';
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+import { packageChunkSort } from '../../utilities/package-chunk-sort';
+import { BaseHrefWebpackPlugin } from '../../lib/base-href-webpack';
+import { extraEntryParser, lazyChunksFilter } from './utils';
+import { WebpackConfigOptions } from '../webpack-config';
+
+
+export function getBrowserConfig(wco: WebpackConfigOptions) {
+  const { projectRoot, buildOptions, appConfig } = wco;
+
+  const appRoot = path.resolve(projectRoot, appConfig.root);
+  const nodeModules = path.resolve(projectRoot, 'node_modules');
+
+  let extraPlugins: any[] = [];
+
+  // figure out which are the lazy loaded entry points
+  const lazyChunks = lazyChunksFilter([
+    ...extraEntryParser(appConfig.scripts, appRoot, 'scripts'),
+    ...extraEntryParser(appConfig.styles, appRoot, 'styles')
+  ]);
+
+  if (buildOptions.vendorChunk) {
+    extraPlugins.push(new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      chunks: ['main'],
+      minChunks: (module: any) => module.resource && module.resource.startsWith(nodeModules)
+    }));
+  }
+
+  return {
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(appRoot, appConfig.index),
+        filename: path.resolve(buildOptions.outputPath, appConfig.index),
+        chunksSortMode: packageChunkSort(appConfig),
+        excludeChunks: lazyChunks,
+        xhtml: true
+      }),
+      new BaseHrefWebpackPlugin({
+        baseHref: buildOptions.baseHref
+      }),
+      new webpack.optimize.CommonsChunkPlugin({
+        minChunks: Infinity,
+        name: 'inline'
+      })
+    ].concat(extraPlugins)
+  };
+}

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

@@ -1,13 +1,10 @@
 import * as webpack from 'webpack';
 import * as path from 'path';
 import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
-import { packageChunkSort } from '../../utilities/package-chunk-sort';
-import { BaseHrefWebpackPlugin } from '../../lib/base-href-webpack';
-import { extraEntryParser, lazyChunksFilter, getOutputHashFormat } from './utils';
+import { extraEntryParser, getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../webpack-config';
 
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 
 /**
@@ -32,12 +29,6 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
   let extraRules: any[] = [];
   let entryPoints: { [key: string]: string[] } = {};
 
-  // figure out which are the lazy loaded entry points
-  const lazyChunks = lazyChunksFilter([
-    ...extraEntryParser(appConfig.scripts, appRoot, 'scripts'),
-    ...extraEntryParser(appConfig.styles, appRoot, 'styles')
-  ]);
-
   if (appConfig.main) {
     entryPoints['main'] = [path.resolve(appRoot, appConfig.main)];
   }
@@ -56,19 +47,10 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     // add entry points and lazy chunks
     globalScripts.forEach(script => {
       let scriptPath = `script-loader!${script.path}`;
-      if (script.lazy) { lazyChunks.push(script.entry); }
       entryPoints[script.entry] = (entryPoints[script.entry] || []).concat(scriptPath);
     });
   }
 
-  if (buildOptions.vendorChunk) {
-    extraPlugins.push(new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      chunks: ['main'],
-      minChunks: (module: any) => module.resource && module.resource.startsWith(nodeModules)
-    }));
-  }
-
   // process asset entries
   if (appConfig.assets) {
     extraPlugins.push(new GlobCopyWebpackPlugin({
@@ -111,21 +93,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
       ].concat(extraRules)
     },
     plugins: [
-      new webpack.NoEmitOnErrorsPlugin(),
-      new HtmlWebpackPlugin({
-        template: path.resolve(appRoot, appConfig.index),
-        filename: path.resolve(buildOptions.outputPath, appConfig.index),
-        chunksSortMode: packageChunkSort(appConfig),
-        excludeChunks: lazyChunks,
-        xhtml: true
-      }),
-      new BaseHrefWebpackPlugin({
-        baseHref: buildOptions.baseHref
-      }),
-      new webpack.optimize.CommonsChunkPlugin({
-        minChunks: Infinity,
-        name: 'inline'
-      })
+      new webpack.NoEmitOnErrorsPlugin()
     ].concat(extraPlugins),
     node: {
       fs: 'empty',

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

@@ -1,7 +1,9 @@
+export * from './browser';
 export * from './common';
 export * from './development';
 export * from './production';
 export * from './styles';
+export * from './test';
 export * from './typescript';
 export * from './utils';
 export * from './xi18n';