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 angular#1836
Fix angular#2012

Author: filipesilva

packages/angular-cli/commands/build.ts

@@ -13,6 +13,8 @@ export interface BuildOptions {
   aot?: boolean;
   sourcemap?: boolean;
   vendorChunk?: boolean;
+  verbose?: boolean;
+  progress?: boolean;
 }
 
 const BuildCommand = Command.extend({
@@ -35,7 +37,9 @@ const BuildCommand = Command.extend({
     { name: 'base-href',      type: String,  default: null, aliases: ['bh'] },
     { name: 'aot',            type: Boolean, default: false },
     { name: 'sourcemap',      type: Boolean, default: true, aliases: ['sm'] },
-    { name: 'vendor-chunk',   type: Boolean, default: true }
+    { name: 'vendor-chunk',   type: Boolean, default: true },
+    { name: 'verbose',        type: Boolean, default: false },
+    { name: 'progress',       type: Boolean, default: true }
   ],
 
   run: function (commandOptions: BuildOptions) {

packages/angular-cli/commands/serve.ts

@@ -27,6 +27,8 @@ export interface ServeTaskOptions {
   sslCert?: string;
   aot?: boolean;
   sourcemap?: boolean;
+  verbose?: boolean;
+  progress?: boolean;
   open?: boolean;
   vendorChunk?: boolean;
 }
@@ -85,6 +87,8 @@ const ServeCommand = Command.extend({
     { name: 'aot',                  type: Boolean, default: false },
     { name: 'sourcemap',            type: Boolean, default: true, aliases: ['sm'] },
     { name: 'vendor-chunk',         type: Boolean, default: true },
+    { name: 'verbose',              type: Boolean, default: false },
+    { name: 'progress',             type: Boolean, default: true },
     {
       name: 'open',
       type: Boolean,

packages/angular-cli/commands/test.ts

@@ -14,6 +14,7 @@ export interface TestOptions {
   reporters?: string;
   build?: boolean;
   sourcemap?: boolean;
+  progress?: boolean;
 }
 
 
@@ -23,6 +24,7 @@ const NgCliTestCommand = TestCommand.extend({
     { name: 'code-coverage', type: Boolean, default: false, aliases: ['cc'] },
     { name: 'lint', type: Boolean, default: false, aliases: ['l'] },
     { name: 'single-run', type: Boolean, default: false, aliases: ['sr'] },
+    { 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

@@ -14,12 +14,15 @@ declare module 'webpack' {
   }
 }
 
-export const getWebpackProdConfigPartial = function(projectRoot: string, appConfig: any) {
+export const getWebpackProdConfigPartial = function(projectRoot: string,
+                                                    appConfig: any,
+                                                    verbose: any) {
   const appRoot = path.resolve(projectRoot, appConfig.root);
   const styles = appConfig.styles
                ? appConfig.styles.map((style: string) => path.resolve(appRoot, style))
                : [];
   const cssLoaders = ['css-loader?sourcemap&minimize', 'postcss-loader'];
+
   return {
     output: {
       path: path.resolve(projectRoot, appConfig.outDir),
@@ -57,7 +60,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

@@ -10,12 +10,13 @@ const webpackLoader = g['angularCliIsLocal']
   ? g.angularCliPackages['@ngtools/webpack'].main
   : '@ngtools/webpack';
 
+const ProgressPlugin  = require('webpack/lib/ProgressPlugin');
 
 const getWebpackTestConfig = function (projectRoot, environment, appConfig, testConfig) {
 
   const appRoot = path.resolve(projectRoot, appConfig.root);
-  const extraRules = [];
-  const extraPlugins = [];
+  var extraRules = [];
+  var extraPlugins = [];
 
   if (testConfig.codeCoverage) {
     extraRules.push({
@@ -49,6 +50,10 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig, test
     }))
   }
 
+  if (testConfig.progress) {
+    extraPlugins.push(new ProgressPlugin({ colors: true }));
+  }
+
   return {
     devtool: testConfig.sourcemap ? 'inline-source-map' : 'eval',
     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

@@ -26,6 +26,7 @@ export class NgCliWebpackConfig {
     isAoT = false,
     sourcemap = true,
     vendorChunk = false,
+    verbose = false
   ) {
     const config: CliConfig = CliConfig.fromProject();
     const appConfig = config.config.apps[0];
@@ -40,7 +41,7 @@ export class NgCliWebpackConfig {
       sourcemap,
       vendorChunk
     );
-    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);
@@ -62,12 +63,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

@@ -13,7 +13,8 @@ const init = (config) => {
   const testConfig = {
     codeCoverage: config.angularCli.codeCoverage || false,
     lint: config.angularCli.lint || false,
-    sourcemap: config.angularCli.sourcemap
+    sourcemap: config.angularCli.sourcemap,
+    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';
 
@@ -26,13 +26,21 @@ export default Task.extend({
       runTaskOptions.baseHref,
       runTaskOptions.aot,
       runTaskOptions.sourcemap,
-      runTaskOptions.vendorChunk
+      runTaskOptions.vendorChunk,
+      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) => {
@@ -45,7 +53,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

@@ -2,9 +2,10 @@ import * as rimraf from 'rimraf';
 import * as path from 'path';
 const Task = require('../ember-cli/lib/models/task');
 import * as webpack from 'webpack';
+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;
@@ -25,16 +26,22 @@ export default <any>Task.extend({
       runTaskOptions.baseHref,
       runTaskOptions.aot,
       runTaskOptions.sourcemap,
-      runTaskOptions.vendorChunk
+      runTaskOptions.vendorChunk,
+      runTaskOptions.verbose
     ).config;
 
     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) => {
@@ -46,7 +53,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');
         }
 
         return stats.hasErrors() ? reject() : 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,37 +15,44 @@ 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,
-      commandOptions.sourcemap,
-      commandOptions.vendorChunk
+      serveTaskOptions.aot,
+      serveTaskOptions.sourcemap,
+      serveTaskOptions.vendorChunk,
+      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 {
@@ -56,12 +63,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');
       }
@@ -77,14 +84,14 @@ export default Task.extend({
         disableDotRule: true,
         htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
       },
-      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) {
@@ -95,19 +102,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() }));
           }