feat(build): add --verbose and --progress flags

Currently builds output a lot of information, some of which can hide
errors, by default.

This PR cuts down on the information shown and adds a `--verbose` flag to
restore previous build output.

A `--progress` flag is also present to turn off progress logging in CI
environments.

Fix #1836
Fix #2012

packages/angular-cli/commands/build.ts

@@ -11,6 +11,8 @@ export interface BuildOptions {
   supressSizes: boolean;
   baseHref?: string;
   aot?: boolean;
+  verbose?: boolean;
+  progress?: boolean;
 }
 
 const BuildCommand = Command.extend({
@@ -31,7 +33,9 @@ const BuildCommand = Command.extend({
     { name: 'watcher',        type: String },
     { name: 'suppress-sizes', type: Boolean, default: false },
     { name: 'base-href',      type: String,  default: null, aliases: ['bh'] },
-    { name: 'aot',            type: Boolean, default: false }
+    { name: 'aot',            type: Boolean, default: false },
+    { name: 'verbose',        type: Boolean, default: false },
+    { name: 'progress',       type: Boolean, default: true }
   ],
 
   run: function (commandOptions: BuildOptions) {

packages/angular-cli/commands/serve.ts

@@ -26,6 +26,8 @@ export interface ServeTaskOptions {
   sslKey?: string;
   sslCert?: string;
   aot?: boolean;
+  verbose?: boolean;
+  progress?: boolean;
   open?: boolean;
 }
 
@@ -81,6 +83,8 @@ const ServeCommand = Command.extend({
     { name: 'ssl-key',              type: String,  default: 'ssl/server.key' },
     { name: 'ssl-cert',             type: String,  default: 'ssl/server.crt' },
     { name: 'aot',                  type: Boolean, default: false },
+    { name: 'verbose',              type: Boolean, default: false },
+    { name: 'progress',             type: Boolean, default: true },
     {
       name: 'open',
       type: Boolean,

packages/angular-cli/commands/test.ts

@@ -7,6 +7,7 @@ const NgCliTestCommand = TestCommand.extend({
     { name: 'watch', type: Boolean, default: true, aliases: ['w'] },
     { name: 'code-coverage', type: Boolean, default: false, aliases: ['cc'] },
     { name: 'lint', type: Boolean, default: false, aliases: ['l'] },
+    { name: 'progress', type: Boolean, default: true},
     { name: 'browsers', type: String },
     { name: 'colors', type: Boolean },
     { name: 'log-level', type: String },

packages/angular-cli/models/webpack-build-production.ts

@@ -13,7 +13,9 @@ declare module 'webpack' {
   }
 }
 
-export const getWebpackProdConfigPartial = function(projectRoot: string, appConfig: any) {
+export const getWebpackProdConfigPartial = function(projectRoot: string,
+                                                    appConfig: any,
+                                                    verbose: any) {
   return {
     devtool: 'source-map',
     output: {
@@ -29,7 +31,7 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
       }),
       new webpack.optimize.UglifyJsPlugin(<any>{
         mangle: { screw_ie8 : true },
-        compress: { screw_ie8: true },
+        compress: { screw_ie8: true, warnings: verbose },
         sourceMap: true
       }),
       new CompressionPlugin({

packages/angular-cli/models/webpack-build-test.js

@@ -3,12 +3,13 @@
 const path = require('path');
 const webpack = require('webpack');
 const atl = require('awesome-typescript-loader');
+const ProgressPlugin  = require('webpack/lib/ProgressPlugin');
 
 const getWebpackTestConfig = function (projectRoot, environment, appConfig, testConfig) {
 
   const appRoot = path.resolve(projectRoot, appConfig.root);
-  const extraRules = [];
-  const extraPlugins = [];
+  let extraRules = [];
+  let extraPlugins = [];
 
   if (testConfig.codeCoverage) {
     extraRules.push({
@@ -42,6 +43,10 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig, test
     }))
   }
 
+  if (testConfig.progress) {
+    extraPlugins.push(new ProgressPlugin({ colors: true }));
+  }
+
   return {
     devtool: 'inline-source-map',
     context: path.resolve(__dirname, './'),

packages/angular-cli/models/webpack-build-utils.ts

@@ -6,18 +6,22 @@ export const ngAppResolve = (resolvePath: string): string => {
 
 export const webpackOutputOptions = {
   colors: true,
+  hash: true,
+  timings: true,
   chunks: true,
+  chunkModules: false,
+  children: false, // listing all children is very noisy in AOT and hides warnings/errors
   modules: false,
   reasons: false,
-  chunkModules: false
+  warnings: true,
+  assets: false, // listing all assets is very noisy when using assets directories
+  version: false
 };
 
-export const webpackDevServerOutputOptions = {
+export const verboseWebpackOutputOptions = {
+  children: true,
   assets: true,
-  colors: true,
   version: true,
-  hash: true,
-  timings: true,
-  chunks: false,
-  chunkModules: false
+  reasons: true,
+  chunkModules: false // TODO: set to true when console to file output is fixed
 };

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

@@ -23,7 +23,8 @@ export class NgCliWebpackConfig {
     public environment: string,
     outputDir?: string,
     baseHref?: string,
-    isAoT = false
+    isAoT = false,
+    verbose = false
   ) {
     const config: CliConfig = CliConfig.fromProject();
     const appConfig = config.config.apps[0];
@@ -36,7 +37,7 @@ export class NgCliWebpackConfig {
       appConfig,
       baseHref
     );
-    let targetConfigPartial = this.getTargetConfig(this.ngCliProject.root, appConfig);
+    let targetConfigPartial = this.getTargetConfig(this.ngCliProject.root, appConfig, verbose);
     const typescriptConfigPartial = isAoT
       ? getWebpackAotConfigPartial(this.ngCliProject.root, appConfig)
       : getWebpackNonAotConfigPartial(this.ngCliProject.root, appConfig);
@@ -58,12 +59,12 @@ export class NgCliWebpackConfig {
     );
   }
 
-  getTargetConfig(projectRoot: string, appConfig: any): any {
+  getTargetConfig(projectRoot: string, appConfig: any, verbose: boolean): any {
     switch (this.target) {
       case 'development':
         return getWebpackDevConfigPartial(projectRoot, appConfig);
       case 'production':
-        return getWebpackProdConfigPartial(projectRoot, appConfig);
+        return getWebpackProdConfigPartial(projectRoot, appConfig, verbose);
       default:
         throw new Error("Invalid build target. Only 'development' and 'production' are available.");
     }

packages/angular-cli/plugins/karma.js

@@ -11,8 +11,9 @@ const init = (config) => {
   const appConfig = angularCliConfig.apps[0];
   const environment = config.angularCli.environment || 'dev';
   const testConfig = {
-    codeCoverage: config.angularCli.codeCoverage || false,
-    lint: config.angularCli.lint || false
+    codeCoverage: config.angularCli.codeCoverage,
+    lint: config.angularCli.lint,
+    progress: config.angularCli.progress
   }
 
   // add webpack config

packages/angular-cli/tasks/build-webpack-watch.ts

@@ -4,7 +4,7 @@ const Task = require('ember-cli/lib/models/task');
 import * as webpack from 'webpack';
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 import { NgCliWebpackConfig } from '../models/webpack-config';
-import { webpackOutputOptions } from '../models/';
+import { webpackOutputOptions, verboseWebpackOutputOptions } from '../models/';
 import { BuildOptions } from '../commands/build';
 import { CliConfig } from '../models/config';
 
@@ -24,13 +24,21 @@ export default Task.extend({
       runTaskOptions.environment,
       outputDir,
       runTaskOptions.baseHref,
-      runTaskOptions.aot
+      runTaskOptions.aot,
+      runTaskOptions.verbose
     ).config;
     const webpackCompiler: any = webpack(config);
 
-    webpackCompiler.apply(new ProgressPlugin({
-      profile: true
-    }));
+    const statsOptions = runTaskOptions.verbose
+                        ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions)
+                        : webpackOutputOptions;
+
+    if (runTaskOptions.progress) {
+      webpackCompiler.apply(new ProgressPlugin({
+        profile: runTaskOptions.verbose,
+        colors: true
+      }));
+    }
 
     return new Promise((resolve, reject) => {
       webpackCompiler.watch({}, (err: any, stats: any) => {
@@ -43,7 +51,7 @@ export default Task.extend({
 
         if (stats.hash !== lastHash) {
           lastHash = stats.hash;
-          process.stdout.write(stats.toString(webpackOutputOptions) + '\n');
+          process.stdout.write(stats.toString(statsOptions) + '\n');
         }
       });
     });

packages/angular-cli/tasks/build-webpack.ts

@@ -1,10 +1,11 @@
 import * as rimraf from 'rimraf';
 import * as path from 'path';
-const Task = require('ember-cli/lib/models/task');
 import * as webpack from 'webpack';
+const Task = require('ember-cli/lib/models/task');
+const ProgressPlugin  = require('webpack/lib/ProgressPlugin');
 import { BuildOptions } from '../commands/build';
 import { NgCliWebpackConfig } from '../models/webpack-config';
-import { webpackOutputOptions } from '../models/';
+import { webpackOutputOptions, verboseWebpackOutputOptions } from '../models/';
 import { CliConfig } from '../models/config';
 
 // Configure build and output;
@@ -23,19 +24,25 @@ export default <any>Task.extend({
       runTaskOptions.environment,
       outputDir,
       runTaskOptions.baseHref,
-      runTaskOptions.aot
+      runTaskOptions.aot,
+      runTaskOptions.verbose
     ).config;
 
     // fail on build error
     config.bail = true;
 
     const webpackCompiler: any = webpack(config);
 
-    const ProgressPlugin  = require('webpack/lib/ProgressPlugin');
+    const statsOptions = runTaskOptions.verbose
+                        ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions)
+                        : webpackOutputOptions;
 
-    webpackCompiler.apply(new ProgressPlugin({
-      profile: true
-    }));
+    if (runTaskOptions.progress) {
+      webpackCompiler.apply(new ProgressPlugin({
+        profile: runTaskOptions.verbose,
+        colors: true
+      }));
+    }
 
     return new Promise((resolve, reject) => {
       webpackCompiler.run((err: any, stats: any) => {
@@ -51,7 +58,7 @@ export default <any>Task.extend({
 
         if (stats.hash !== lastHash) {
           lastHash = stats.hash;
-          process.stdout.write(stats.toString(webpackOutputOptions) + '\n');
+          process.stdout.write(stats.toString(statsOptions) + '\n');
         }
         resolve();
       });

packages/angular-cli/tasks/serve-webpack.ts

@@ -6,7 +6,7 @@ const Task = require('ember-cli/lib/models/task');
 import * as webpack from 'webpack';
 const WebpackDevServer = require('webpack-dev-server');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
-import { webpackDevServerOutputOptions } from '../models/';
+import { webpackOutputOptions, verboseWebpackOutputOptions } from '../models/';
 import { NgCliWebpackConfig } from '../models/webpack-config';
 import { ServeTaskOptions } from '../commands/serve';
 import { CliConfig } from '../models/config';
@@ -15,35 +15,42 @@ import * as url from 'url';
 const opn = require('opn');
 
 export default Task.extend({
-  run: function(commandOptions: ServeTaskOptions) {
+  run: function(serveTaskOptions: ServeTaskOptions) {
     const ui = this.ui;
 
     let webpackCompiler: any;
 
     let config = new NgCliWebpackConfig(
       this.project,
-      commandOptions.target,
-      commandOptions.environment,
+      serveTaskOptions.target,
+      serveTaskOptions.environment,
       undefined,
       undefined,
-      commandOptions.aot
+      serveTaskOptions.aot,
+      serveTaskOptions.verbose
     ).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}/`
+      `webpack-dev-server/client?http://${serveTaskOptions.host}:${serveTaskOptions.port}/`
     );
     webpackCompiler = webpack(config);
 
-    webpackCompiler.apply(new ProgressPlugin({
-      profile: true,
-      colors: true
-    }));
+    const statsOptions = serveTaskOptions.verbose
+                        ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions)
+                        : webpackOutputOptions;
+
+    if (serveTaskOptions.progress) {
+      webpackCompiler.apply(new ProgressPlugin({
+        profile: serveTaskOptions.verbose,
+        colors: true
+      }));
+    }
 
     let proxyConfig = {};
-    if (commandOptions.proxyConfig) {
-      const proxyPath = path.resolve(this.project.root, commandOptions.proxyConfig);
+    if (serveTaskOptions.proxyConfig) {
+      const proxyPath = path.resolve(this.project.root, serveTaskOptions.proxyConfig);
       if (fs.existsSync(proxyPath)) {
         proxyConfig = require(proxyPath);
       } else {
@@ -54,12 +61,12 @@ export default Task.extend({
 
     let sslKey: string = null;
     let sslCert: string = null;
-    if (commandOptions.ssl) {
-      const keyPath = path.resolve(this.project.root, commandOptions.sslKey);
+    if (serveTaskOptions.ssl) {
+      const keyPath = path.resolve(this.project.root, serveTaskOptions.sslKey);
       if (fs.existsSync(keyPath)) {
         sslKey = fs.readFileSync(keyPath, 'utf-8');
       }
-      const certPath = path.resolve(this.project.root, commandOptions.sslCert);
+      const certPath = path.resolve(this.project.root, serveTaskOptions.sslCert);
       if (fs.existsSync(certPath)) {
         sslCert = fs.readFileSync(certPath, 'utf-8');
       }
@@ -73,14 +80,14 @@ export default Task.extend({
       historyApiFallback: {
         disableDotRule: true,
       },
-      stats: webpackDevServerOutputOptions,
+      stats: statsOptions,
       inline: true,
       proxy: proxyConfig,
-      compress: commandOptions.target === 'production',
+      compress: serveTaskOptions.target === 'production',
       watchOptions: {
         poll: CliConfig.fromProject().config.defaults.poll
       },
-      https: commandOptions.ssl
+      https: serveTaskOptions.ssl
     };
 
     if (sslKey != null && sslCert != null) {
@@ -91,19 +98,21 @@ export default Task.extend({
     ui.writeLine(chalk.green(oneLine`
       **
       NG Live Development Server is running on
-      http${commandOptions.ssl ? 's' : ''}://${commandOptions.host}:${commandOptions.port}.
+      http${serveTaskOptions.ssl ? 's' : ''}://${serveTaskOptions.host}:${serveTaskOptions.port}.
       **
     `));
 
     const server = new WebpackDevServer(webpackCompiler, webpackDevServerConfiguration);
     return new Promise((resolve, reject) => {
-      server.listen(commandOptions.port, `${commandOptions.host}`, function(err: any, stats: any) {
+      server.listen(serveTaskOptions.port,
+                    `${serveTaskOptions.host}`,
+                    function(err: any, stats: any) {
         if (err) {
           console.error(err.stack || err);
           if (err.details) { console.error(err.details); }
           reject(err.details);
         } else {
-          const { open, host, port } = commandOptions;
+          const { open, host, port } = serveTaskOptions;
           if (open) {
             opn(url.format({ protocol: 'http', hostname: host, port: port.toString() }));
           }

packages/angular-cli/tasks/test.ts

@@ -23,6 +23,7 @@ export default Task.extend({
       options.angularCli = {
         codeCoverage: options.codeCoverage,
         lint: options.lint,
+        progress: options.progress,
       };
 
       // Assign additional karmaConfig options to the local ngapp config