From 506062cf700a909f8e21e43e15cf49639c9b1d3f Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Mon, 24 Oct 2016 16:10:56 +0100 Subject: [PATCH 1/7] 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 | 6 +- packages/angular-cli/commands/serve.ts | 4 ++ packages/angular-cli/commands/test.ts | 2 + .../models/webpack-build-production.ts | 7 ++- .../angular-cli/models/webpack-build-test.js | 9 ++- .../angular-cli/models/webpack-build-utils.ts | 18 +++--- packages/angular-cli/models/webpack-config.ts | 7 ++- packages/angular-cli/plugins/karma.js | 3 +- .../angular-cli/tasks/build-webpack-watch.ts | 20 +++++-- packages/angular-cli/tasks/build-webpack.ts | 21 ++++--- packages/angular-cli/tasks/serve-webpack.ts | 55 +++++++++++-------- packages/angular-cli/tasks/test.ts | 3 +- 12 files changed, 102 insertions(+), 53 deletions(-) diff --git a/packages/angular-cli/commands/build.ts b/packages/angular-cli/commands/build.ts index b1ab175f391b..97ba333527cf 100644 --- a/packages/angular-cli/commands/build.ts +++ b/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) { diff --git a/packages/angular-cli/commands/serve.ts b/packages/angular-cli/commands/serve.ts index 9beb8822920b..2105485af1a0 100644 --- a/packages/angular-cli/commands/serve.ts +++ b/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, diff --git a/packages/angular-cli/commands/test.ts b/packages/angular-cli/commands/test.ts index cd4e23c87e21..3316c14e09d3 100644 --- a/packages/angular-cli/commands/test.ts +++ b/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 }, diff --git a/packages/angular-cli/models/webpack-build-production.ts b/packages/angular-cli/models/webpack-build-production.ts index 0d52a86a4678..7e0b73331d36 100644 --- a/packages/angular-cli/models/webpack-build-production.ts +++ b/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({ mangle: { screw_ie8 : true }, - compress: { screw_ie8: true }, + compress: { screw_ie8: true, warnings: verbose }, sourceMap: true }), new CompressionPlugin({ diff --git a/packages/angular-cli/models/webpack-build-test.js b/packages/angular-cli/models/webpack-build-test.js index 3c4c390341b0..d0ca873d3782 100644 --- a/packages/angular-cli/models/webpack-build-test.js +++ b/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, './'), diff --git a/packages/angular-cli/models/webpack-build-utils.ts b/packages/angular-cli/models/webpack-build-utils.ts index b1853ea5ae00..ed948e6164ba 100644 --- a/packages/angular-cli/models/webpack-build-utils.ts +++ b/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 }; diff --git a/packages/angular-cli/models/webpack-config.ts b/packages/angular-cli/models/webpack-config.ts index 5f2f8a359a47..ca7478649a20 100644 --- a/packages/angular-cli/models/webpack-config.ts +++ b/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."); } diff --git a/packages/angular-cli/plugins/karma.js b/packages/angular-cli/plugins/karma.js index 4f8ff7088ac9..1448b2bb4408 100644 --- a/packages/angular-cli/plugins/karma.js +++ b/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 diff --git a/packages/angular-cli/tasks/build-webpack-watch.ts b/packages/angular-cli/tasks/build-webpack-watch.ts index 672da6965c1d..7341c2f44da6 100644 --- a/packages/angular-cli/tasks/build-webpack-watch.ts +++ b/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'); } }); }); diff --git a/packages/angular-cli/tasks/build-webpack.ts b/packages/angular-cli/tasks/build-webpack.ts index 9f519d4b57f5..d77819378c7c 100644 --- a/packages/angular-cli/tasks/build-webpack.ts +++ b/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 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 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(); diff --git a/packages/angular-cli/tasks/serve-webpack.ts b/packages/angular-cli/tasks/serve-webpack.ts index 936766633106..40c3baf740aa 100644 --- a/packages/angular-cli/tasks/serve-webpack.ts +++ b/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() })); } diff --git a/packages/angular-cli/tasks/test.ts b/packages/angular-cli/tasks/test.ts index 6714cf0e7601..648314d88764 100644 --- a/packages/angular-cli/tasks/test.ts +++ b/packages/angular-cli/tasks/test.ts @@ -26,7 +26,8 @@ export default Task.extend({ karmaOptions.angularCli = { codeCoverage: options.codeCoverage, lint: options.lint, - sourcemap: options.sourcemap + sourcemap: options.sourcemap, + progress: options.progress }; // Assign additional karmaConfig options to the local ngapp config From 3f34ae163df109d8e9b81a0efa7753db779adaa3 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sat, 26 Nov 2016 14:07:34 +0000 Subject: [PATCH 2/7] undo const to var --- packages/angular-cli/models/webpack-build-test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/angular-cli/models/webpack-build-test.js b/packages/angular-cli/models/webpack-build-test.js index d0ca873d3782..5c1541044e69 100644 --- a/packages/angular-cli/models/webpack-build-test.js +++ b/packages/angular-cli/models/webpack-build-test.js @@ -15,8 +15,8 @@ const ProgressPlugin = require('webpack/lib/ProgressPlugin'); const getWebpackTestConfig = function (projectRoot, environment, appConfig, testConfig) { const appRoot = path.resolve(projectRoot, appConfig.root); - var extraRules = []; - var extraPlugins = []; + const extraRules = []; + const extraPlugins = []; if (testConfig.codeCoverage) { extraRules.push({ From 14ead7176095002ad07d807c278b03588015a86e Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sat, 26 Nov 2016 14:24:50 +0000 Subject: [PATCH 3/7] refactor stats merging logic --- packages/angular-cli/models/webpack-build-utils.ts | 10 ++++++++-- packages/angular-cli/tasks/build-webpack-watch.ts | 8 +++----- packages/angular-cli/tasks/build-webpack.ts | 8 +++----- packages/angular-cli/tasks/serve-webpack.ts | 8 +++----- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/angular-cli/models/webpack-build-utils.ts b/packages/angular-cli/models/webpack-build-utils.ts index ed948e6164ba..b2082b031fc0 100644 --- a/packages/angular-cli/models/webpack-build-utils.ts +++ b/packages/angular-cli/models/webpack-build-utils.ts @@ -4,7 +4,7 @@ export const ngAppResolve = (resolvePath: string): string => { return path.resolve(process.cwd(), resolvePath); }; -export const webpackOutputOptions = { +const webpackOutputOptions = { colors: true, hash: true, timings: true, @@ -18,10 +18,16 @@ export const webpackOutputOptions = { version: false }; -export const verboseWebpackOutputOptions = { +const verboseWebpackOutputOptions = { children: true, assets: true, version: true, reasons: true, chunkModules: false // TODO: set to true when console to file output is fixed }; + +export function getWebpackStatsConfig(verbose = false){ + return verbose + ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions) + : webpackOutputOptions; +} diff --git a/packages/angular-cli/tasks/build-webpack-watch.ts b/packages/angular-cli/tasks/build-webpack-watch.ts index 7341c2f44da6..8139244423d1 100644 --- a/packages/angular-cli/tasks/build-webpack-watch.ts +++ b/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, verboseWebpackOutputOptions } from '../models/'; +import { getWebpackStatsConfig } from '../models/'; import { BuildOptions } from '../commands/build'; import { CliConfig } from '../models/config'; @@ -31,9 +31,7 @@ export default Task.extend({ ).config; const webpackCompiler: any = webpack(config); - const statsOptions = runTaskOptions.verbose - ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions) - : webpackOutputOptions; + const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose); if (runTaskOptions.progress) { webpackCompiler.apply(new ProgressPlugin({ @@ -53,7 +51,7 @@ export default Task.extend({ if (stats.hash !== lastHash) { lastHash = stats.hash; - process.stdout.write(stats.toString(statsOptions) + '\n'); + process.stdout.write(stats.toString(statsConfig) + '\n'); } }); }); diff --git a/packages/angular-cli/tasks/build-webpack.ts b/packages/angular-cli/tasks/build-webpack.ts index d77819378c7c..0c8e56ef5457 100644 --- a/packages/angular-cli/tasks/build-webpack.ts +++ b/packages/angular-cli/tasks/build-webpack.ts @@ -5,7 +5,7 @@ import * as webpack from 'webpack'; const ProgressPlugin = require('webpack/lib/ProgressPlugin'); import { BuildOptions } from '../commands/build'; import { NgCliWebpackConfig } from '../models/webpack-config'; -import { webpackOutputOptions, verboseWebpackOutputOptions } from '../models/'; +import { getWebpackStatsConfig } from '../models/'; import { CliConfig } from '../models/config'; // Configure build and output; @@ -32,9 +32,7 @@ export default Task.extend({ const webpackCompiler: any = webpack(config); - const statsOptions = runTaskOptions.verbose - ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions) - : webpackOutputOptions; + const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose); if (runTaskOptions.progress) { webpackCompiler.apply(new ProgressPlugin({ @@ -53,7 +51,7 @@ export default Task.extend({ if (stats.hash !== lastHash) { lastHash = stats.hash; - process.stdout.write(stats.toString(statsOptions) + '\n'); + process.stdout.write(stats.toString(statsConfig) + '\n'); } return stats.hasErrors() ? reject() : resolve(); diff --git a/packages/angular-cli/tasks/serve-webpack.ts b/packages/angular-cli/tasks/serve-webpack.ts index 40c3baf740aa..2f32238aac00 100644 --- a/packages/angular-cli/tasks/serve-webpack.ts +++ b/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 { webpackOutputOptions, verboseWebpackOutputOptions } from '../models/'; +import { getWebpackStatsConfig } from '../models/'; import { NgCliWebpackConfig } from '../models/webpack-config'; import { ServeTaskOptions } from '../commands/serve'; import { CliConfig } from '../models/config'; @@ -39,9 +39,7 @@ export default Task.extend({ ); webpackCompiler = webpack(config); - const statsOptions = serveTaskOptions.verbose - ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions) - : webpackOutputOptions; + const statsConfig = getWebpackStatsConfig(serveTaskOptions.verbose); if (serveTaskOptions.progress) { webpackCompiler.apply(new ProgressPlugin({ @@ -84,7 +82,7 @@ export default Task.extend({ disableDotRule: true, htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'] }, - stats: statsOptions, + stats: statsConfig, inline: true, proxy: proxyConfig, compress: serveTaskOptions.target === 'production', From 715ad55e8d83e698e8a338f16b229295bfc31784 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sat, 26 Nov 2016 14:51:57 +0000 Subject: [PATCH 4/7] refactor progress plugin to common config --- packages/angular-cli/models/webpack-build-common.ts | 12 +++++++++++- packages/angular-cli/models/webpack-config.ts | 7 +++++-- packages/angular-cli/tasks/build-webpack-watch.ts | 8 +------- packages/angular-cli/tasks/build-webpack.ts | 10 ++-------- packages/angular-cli/tasks/serve-webpack.ts | 10 ++-------- 5 files changed, 21 insertions(+), 26 deletions(-) diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts index 39bdd641e4f6..27b85cfad977 100644 --- a/packages/angular-cli/models/webpack-build-common.ts +++ b/packages/angular-cli/models/webpack-build-common.ts @@ -4,6 +4,7 @@ import {GlobCopyWebpackPlugin} from '../plugins/glob-copy-webpack-plugin'; import {packageChunkSort} from '../utilities/package-chunk-sort'; import {BaseHrefWebpackPlugin} from '@angular-cli/base-href-webpack'; +const ProgressPlugin = require('webpack/lib/ProgressPlugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const autoprefixer = require('autoprefixer'); @@ -14,7 +15,9 @@ export function getWebpackCommonConfig( appConfig: any, baseHref: string, sourcemap: boolean, - vendorChunk: boolean + vendorChunk: boolean, + verbose: boolean, + progress: boolean ) { const appRoot = path.resolve(projectRoot, appConfig.root); @@ -44,6 +47,13 @@ export function getWebpackCommonConfig( })); } + if (progress) { + extraPlugins.push(new ProgressPlugin({ + profile: verbose, + colors: true + })); + } + return { devtool: sourcemap ? 'source-map' : false, resolve: { diff --git a/packages/angular-cli/models/webpack-config.ts b/packages/angular-cli/models/webpack-config.ts index ca7478649a20..d605305bc96c 100644 --- a/packages/angular-cli/models/webpack-config.ts +++ b/packages/angular-cli/models/webpack-config.ts @@ -26,7 +26,8 @@ export class NgCliWebpackConfig { isAoT = false, sourcemap = true, vendorChunk = false, - verbose = false + verbose = false, + progress = true ) { const config: CliConfig = CliConfig.fromProject(); const appConfig = config.config.apps[0]; @@ -39,7 +40,9 @@ export class NgCliWebpackConfig { appConfig, baseHref, sourcemap, - vendorChunk + vendorChunk, + verbose, + progress ); let targetConfigPartial = this.getTargetConfig(this.ngCliProject.root, appConfig, verbose); const typescriptConfigPartial = isAoT diff --git a/packages/angular-cli/tasks/build-webpack-watch.ts b/packages/angular-cli/tasks/build-webpack-watch.ts index 8139244423d1..104d67012e15 100644 --- a/packages/angular-cli/tasks/build-webpack-watch.ts +++ b/packages/angular-cli/tasks/build-webpack-watch.ts @@ -28,18 +28,12 @@ export default Task.extend({ runTaskOptions.sourcemap, runTaskOptions.vendorChunk, runTaskOptions.verbose, + runTaskOptions.progress ).config; const webpackCompiler: any = webpack(config); const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose); - if (runTaskOptions.progress) { - webpackCompiler.apply(new ProgressPlugin({ - profile: runTaskOptions.verbose, - colors: true - })); - } - return new Promise((resolve, reject) => { webpackCompiler.watch({}, (err: any, stats: any) => { if (err) { diff --git a/packages/angular-cli/tasks/build-webpack.ts b/packages/angular-cli/tasks/build-webpack.ts index 0c8e56ef5457..c7a786a4e8e5 100644 --- a/packages/angular-cli/tasks/build-webpack.ts +++ b/packages/angular-cli/tasks/build-webpack.ts @@ -27,20 +27,14 @@ export default Task.extend({ runTaskOptions.aot, runTaskOptions.sourcemap, runTaskOptions.vendorChunk, - runTaskOptions.verbose + runTaskOptions.verbose, + runTaskOptions.progress ).config; const webpackCompiler: any = webpack(config); const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose); - if (runTaskOptions.progress) { - webpackCompiler.apply(new ProgressPlugin({ - profile: runTaskOptions.verbose, - colors: true - })); - } - return new Promise((resolve, reject) => { webpackCompiler.run((err: any, stats: any) => { if (err) { return reject(err); } diff --git a/packages/angular-cli/tasks/serve-webpack.ts b/packages/angular-cli/tasks/serve-webpack.ts index 2f32238aac00..c831396501de 100644 --- a/packages/angular-cli/tasks/serve-webpack.ts +++ b/packages/angular-cli/tasks/serve-webpack.ts @@ -29,7 +29,8 @@ export default Task.extend({ serveTaskOptions.aot, serveTaskOptions.sourcemap, serveTaskOptions.vendorChunk, - serveTaskOptions.verbose + serveTaskOptions.verbose, + serveTaskOptions.progress ).config; // This allows for live reload of page when changes are made to repo. @@ -41,13 +42,6 @@ export default Task.extend({ const statsConfig = getWebpackStatsConfig(serveTaskOptions.verbose); - if (serveTaskOptions.progress) { - webpackCompiler.apply(new ProgressPlugin({ - profile: serveTaskOptions.verbose, - colors: true - })); - } - let proxyConfig = {}; if (serveTaskOptions.proxyConfig) { const proxyPath = path.resolve(this.project.root, serveTaskOptions.proxyConfig); From 9327463eed45c357de5dbffce8f2bcc9348ee8f0 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sat, 26 Nov 2016 14:52:18 +0000 Subject: [PATCH 5/7] fix lint --- packages/angular-cli/models/webpack-build-utils.ts | 2 +- packages/angular-cli/tasks/build-webpack-watch.ts | 1 - packages/angular-cli/tasks/build-webpack.ts | 1 - packages/angular-cli/tasks/serve-webpack.ts | 1 - 4 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/angular-cli/models/webpack-build-utils.ts b/packages/angular-cli/models/webpack-build-utils.ts index b2082b031fc0..b2aa2148800e 100644 --- a/packages/angular-cli/models/webpack-build-utils.ts +++ b/packages/angular-cli/models/webpack-build-utils.ts @@ -26,7 +26,7 @@ const verboseWebpackOutputOptions = { chunkModules: false // TODO: set to true when console to file output is fixed }; -export function getWebpackStatsConfig(verbose = false){ +export function getWebpackStatsConfig(verbose = false) { return verbose ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions) : webpackOutputOptions; diff --git a/packages/angular-cli/tasks/build-webpack-watch.ts b/packages/angular-cli/tasks/build-webpack-watch.ts index 104d67012e15..7e6958a90fbe 100644 --- a/packages/angular-cli/tasks/build-webpack-watch.ts +++ b/packages/angular-cli/tasks/build-webpack-watch.ts @@ -2,7 +2,6 @@ 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 { NgCliWebpackConfig } from '../models/webpack-config'; import { getWebpackStatsConfig } from '../models/'; import { BuildOptions } from '../commands/build'; diff --git a/packages/angular-cli/tasks/build-webpack.ts b/packages/angular-cli/tasks/build-webpack.ts index c7a786a4e8e5..770a9befe6e0 100644 --- a/packages/angular-cli/tasks/build-webpack.ts +++ b/packages/angular-cli/tasks/build-webpack.ts @@ -2,7 +2,6 @@ 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 { getWebpackStatsConfig } from '../models/'; diff --git a/packages/angular-cli/tasks/serve-webpack.ts b/packages/angular-cli/tasks/serve-webpack.ts index c831396501de..71cb640c070c 100644 --- a/packages/angular-cli/tasks/serve-webpack.ts +++ b/packages/angular-cli/tasks/serve-webpack.ts @@ -5,7 +5,6 @@ const SilentError = require('silent-error'); 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 { getWebpackStatsConfig } from '../models/'; import { NgCliWebpackConfig } from '../models/webpack-config'; import { ServeTaskOptions } from '../commands/serve'; From e2aeaec9a786c620dd99ce2d4175815a653b1b4e Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sat, 26 Nov 2016 14:58:01 +0000 Subject: [PATCH 6/7] set tests to silent on ng serve/test --- tests/e2e/utils/process.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/utils/process.ts b/tests/e2e/utils/process.ts index 4746453ec424..87e04e600dcf 100644 --- a/tests/e2e/utils/process.ts +++ b/tests/e2e/utils/process.ts @@ -101,7 +101,7 @@ export function silentExecAndWaitForOutputToMatch(cmd: string, args: string[], m } export function ng(...args: string[]) { - if (args[0] == 'build') { + if (args[0] == 'build' || args[0] == 'serve' || args[0] == 'test') { return silentNg(...args); } else { return _exec({}, 'ng', args); From f89bbf4f96e66f235fc8a7fa3f772cef4e682371 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sat, 26 Nov 2016 15:30:22 +0000 Subject: [PATCH 7/7] add --no-progress to ng helper --- tests/e2e/utils/process.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/utils/process.ts b/tests/e2e/utils/process.ts index 87e04e600dcf..ab643865dc4d 100644 --- a/tests/e2e/utils/process.ts +++ b/tests/e2e/utils/process.ts @@ -102,7 +102,7 @@ export function silentExecAndWaitForOutputToMatch(cmd: string, args: string[], m export function ng(...args: string[]) { if (args[0] == 'build' || args[0] == 'serve' || args[0] == 'test') { - return silentNg(...args); + return silentNg(...args, '--no-progress'); } else { return _exec({}, 'ng', args); }