This should fix the missing option '--output-path' on webpack. (#1627)

* Added ability to specify output path for bundles and assets with `ng build` commands. 
* Command is specified by using the `--output-path` flag.

Author: not-only-code

addon/ng2/models/webpack-build-common.ts

@@ -5,7 +5,10 @@ import * as webpack from 'webpack';
 import { ForkCheckerPlugin } from 'awesome-typescript-loader';
 import { CliConfig } from './config';
 
-export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
+export function getWebpackCommonConfig(projectRoot: string, sourceDir: string, outputDir: string) {
+
+  let outputPath: string = path.resolve(projectRoot, outputDir);
+
   return {
     devtool: 'source-map',
     resolve: {
@@ -18,7 +21,7 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
       polyfills: path.resolve(projectRoot, `./${sourceDir}/polyfills.ts`)
     },
     output: {
-      path: path.resolve(projectRoot, './dist'),
+      path: outputPath,
       filename: '[name].bundle.js'
     },
     module: {
@@ -66,7 +69,7 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
       new CopyWebpackPlugin([{
         context: path.resolve(projectRoot, './public'),
         from: '**/*',
-        to: path.resolve(projectRoot, './dist')
+        to: outputPath
       }])
     ],
     node: {

addon/ng2/models/webpack-build-development.ts

@@ -1,12 +1,13 @@
 import { CliConfig } from './config';
 const path = require('path')
 
-export const getWebpackDevConfigPartial = function(projectRoot: string, sourceDir: string) {
+export const getWebpackDevConfigPartial = function(projectRoot: string, sourceDir: string, outputDir: string) {
+  
   return {
     debug: true,
     devtool: 'source-map',
     output: {
-      path: path.resolve(projectRoot, './dist'),
+      path: path.resolve(projectRoot, outputDir),
       filename: '[name].bundle.js',
       sourceMapFilename: '[name].map',
       chunkFilename: '[id].chunk.js'

addon/ng2/models/webpack-build-mobile.ts

@@ -5,12 +5,13 @@ import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import { PrerenderWebpackPlugin } from '../utilities/prerender-webpack-plugin.ts';
 import { CliConfig } from './config';
 
-export const getWebpackMobileConfigPartial = function (projectRoot: string, sourceDir: string) {
+export const getWebpackMobileConfigPartial = function (projectRoot: string, sourceDir: string, outputDir: string) {
+  let outputPath: string = path.resolve(projectRoot, outputDir);
   return {
     plugins: [
       new CopyWebpackPlugin([
-        {from: path.resolve(projectRoot, `./${sourceDir}/icons`), to: path.resolve(projectRoot, './dist/icons')},
-        {from: path.resolve(projectRoot, `./${sourceDir}/manifest.webapp`), to: path.resolve(projectRoot, './dist')}
+        {from: path.resolve(projectRoot, `./${sourceDir}/icons`), to: path.resolve(outputPath, './icons')},
+        {from: path.resolve(projectRoot, `./${sourceDir}/manifest.webapp`), to: outputPath}
       ]),
       new PrerenderWebpackPlugin({
         templatePath: 'index.html',

addon/ng2/models/webpack-build-production.ts

@@ -5,12 +5,13 @@ import * as CompressionPlugin from 'compression-webpack-plugin';
 import * as webpack from 'webpack';
 import { CliConfig } from './config';
 
-export const getWebpackProdConfigPartial = function(projectRoot: string, sourceDir: string) {
+export const getWebpackProdConfigPartial = function(projectRoot: string, sourceDir: string, outputDir: string) {
+
   return {
     debug: false,
     devtool: 'source-map',
     output: {
-      path: path.resolve(projectRoot, './dist'),
+      path: path.resolve(projectRoot, outputDir),
       filename: '[name].[chunkhash].bundle.js',
       sourceMapFilename: '[name].[chunkhash].bundle.map',
       chunkFilename: '[id].[chunkhash].chunk.js'

addon/ng2/models/webpack-config.ts

@@ -23,17 +23,17 @@ export class NgCliWebpackConfig {
   private webpackMobileConfigPartial: any;
   private webpackMobileProdConfigPartial: any;
 
-  constructor(public ngCliProject: any, public target: string, public environment: string) {
+  constructor(public ngCliProject: any, public target: string, public environment: string, outputDir: string) {
     const sourceDir = CliConfig.fromProject().defaults.sourceDir;
 
     const environmentPath = `./${sourceDir}/app/environments/environment.${environment}.ts`;
 
-    this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root, sourceDir);
-    this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, sourceDir);
-    this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, sourceDir);
+    this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root, sourceDir, outputDir);
+    this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, sourceDir, outputDir);
+    this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, sourceDir, outputDir);
 
     if (CliConfig.fromProject().apps[0].mobile){
-      this.webpackMobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, sourceDir);
+      this.webpackMobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, sourceDir, outputDir);
       this.webpackMobileProdConfigPartial = getWebpackMobileProdConfigPartial(this.ngCliProject.root, sourceDir);
       this.webpackBaseConfig = webpackMerge(this.webpackBaseConfig, this.webpackMobileConfigPartial);
       this.webpackProdConfigPartial = webpackMerge(this.webpackProdConfigPartial, this.webpackMobileProdConfigPartial);

addon/ng2/tasks/build-webpack-watch.ts

@@ -16,7 +16,7 @@ module.exports = Task.extend({
 
     rimraf.sync(path.resolve(project.root, runTaskOptions.outputPath));
 
-    const config = new NgCliWebpackConfig(project, runTaskOptions.target, runTaskOptions.environment).config;
+    const config = new NgCliWebpackConfig(project, runTaskOptions.target, runTaskOptions.environment, runTaskOptions.outputPath).config;
     const webpackCompiler = webpack(config);
 
     webpackCompiler.apply(new ProgressPlugin({

addon/ng2/tasks/build-webpack.ts

@@ -16,7 +16,8 @@ module.exports = Task.extend({
     var project = this.cliProject;
 
     rimraf.sync(path.resolve(project.root, runTaskOptions.outputPath));
-    var config = new NgCliWebpackConfig(project, runTaskOptions.target, runTaskOptions.environment).config;
+    var config = new NgCliWebpackConfig(project, runTaskOptions.target, runTaskOptions.environment, runTaskOptions.outputPath).config;
+    
     const webpackCompiler = webpack(config);
 
     const ProgressPlugin  = require('webpack/lib/ProgressPlugin');

addon/ng2/tasks/serve-webpack.ts

@@ -15,7 +15,8 @@ module.exports = Task.extend({
     let lastHash = null;
     let webpackCompiler: any;
 
-    var config: NgCliWebpackConfig = new NgCliWebpackConfig(this.project, commandOptions.target, commandOptions.environment).config;
+    var config: NgCliWebpackConfig = new NgCliWebpackConfig(this.project, commandOptions.target, commandOptions.environment, commandOptions.outputPath).config;
+
     // This allows for live reload of page when changes are made to repo.
     // https://webpack.github.io/docs/webpack-dev-server.html#inline-mode
     config.entry.main.unshift(`webpack-dev-server/client?http://${commandOptions.host}:${commandOptions.port}/`);
@@ -27,7 +28,7 @@ module.exports = Task.extend({
     }));
 
     const webpackDevServerConfiguration: IWebpackDevServerConfigurationOptions = {
-      contentBase: path.resolve(this.project.root, `./${CliConfig.fromProject().defaults.sourceDir}`),
+      contentBase: config.output.path,
       historyApiFallback: true,
       stats: webpackDevServerOutputOptions,
       inline: true

tests/e2e/e2e_workflow.spec.js

@@ -144,6 +144,18 @@ describe('Basic end-to-end Workflow', function () {
       });
   });
 
+  it('Build pack output files into a different folder', function () {
+    this.timeout(420000);
+
+    return ng(['build', '-o', './build-output'])
+      .catch(() => {
+        throw new Error('Build failed.');
+      })
+      .then(function () {
+        expect(existsSync(path.join(process.cwd(), './build-output'))).to.be.equal(true);
+      });
+  });
+
   it_mobile('Does not include mobile prod features', () => {
     let index = fs.readFileSync(path.join(process.cwd(), 'dist/index.html'), 'utf-8');
     // Service Worker