Skip to content

Commit f6f24e7

Browse files
filipesilvafilipesilva
authored
feat(build): add --verbose and --progress flags (#2858)
* 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
1 parent 58fea8f commit f6f24e7

14 files changed

+100
-59
lines changed

‎packages/angular-cli/commands/build.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export interface BuildOptions {
1313
aot?: boolean;
1414
sourcemap?: boolean;
1515
vendorChunk?: boolean;
16+
verbose?: boolean;
17+
progress?: boolean;
1618
}
1719

1820
const BuildCommand = Command.extend({
@@ -35,7 +37,9 @@ const BuildCommand = Command.extend({
3537
{ name: 'base-href', type: String, default: null, aliases: ['bh'] },
3638
{ name: 'aot', type: Boolean, default: false },
3739
{ name: 'sourcemap', type: Boolean, default: true, aliases: ['sm'] },
38-
{ name: 'vendor-chunk', type: Boolean, default: true }
40+
{ name: 'vendor-chunk', type: Boolean, default: true },
41+
{ name: 'verbose', type: Boolean, default: false },
42+
{ name: 'progress', type: Boolean, default: true }
3943
],
4044

4145
run: function (commandOptions: BuildOptions) {

‎packages/angular-cli/commands/serve.ts

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export interface ServeTaskOptions {
2727
sslCert?: string;
2828
aot?: boolean;
2929
sourcemap?: boolean;
30+
verbose?: boolean;
31+
progress?: boolean;
3032
open?: boolean;
3133
vendorChunk?: boolean;
3234
}
@@ -85,6 +87,8 @@ const ServeCommand = Command.extend({
8587
{ name: 'aot', type: Boolean, default: false },
8688
{ name: 'sourcemap', type: Boolean, default: true, aliases: ['sm'] },
8789
{ name: 'vendor-chunk', type: Boolean, default: true },
90+
{ name: 'verbose', type: Boolean, default: false },
91+
{ name: 'progress', type: Boolean, default: true },
8892
{
8993
name: 'open',
9094
type: Boolean,

‎packages/angular-cli/commands/test.ts

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export interface TestOptions {
1414
reporters?: string;
1515
build?: boolean;
1616
sourcemap?: boolean;
17+
progress?: boolean;
1718
}
1819

1920

@@ -23,6 +24,7 @@ const NgCliTestCommand = TestCommand.extend({
2324
{ name: 'code-coverage', type: Boolean, default: false, aliases: ['cc'] },
2425
{ name: 'lint', type: Boolean, default: false, aliases: ['l'] },
2526
{ name: 'single-run', type: Boolean, default: false, aliases: ['sr'] },
27+
{ name: 'progress', type: Boolean, default: true},
2628
{ name: 'browsers', type: String },
2729
{ name: 'colors', type: Boolean },
2830
{ name: 'log-level', type: String },

‎packages/angular-cli/models/webpack-build-common.ts

+11-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {GlobCopyWebpackPlugin} from '../plugins/glob-copy-webpack-plugin';
44
import {packageChunkSort} from '../utilities/package-chunk-sort';
55
import {BaseHrefWebpackPlugin} from '@angular-cli/base-href-webpack';
66

7+
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
78
const HtmlWebpackPlugin = require('html-webpack-plugin');
89
const autoprefixer = require('autoprefixer');
910

@@ -14,7 +15,9 @@ export function getWebpackCommonConfig(
1415
appConfig: any,
1516
baseHref: string,
1617
sourcemap: boolean,
17-
vendorChunk: boolean
18+
vendorChunk: boolean,
19+
verbose: boolean,
20+
progress: boolean
1821
) {
1922

2023
const appRoot = path.resolve(projectRoot, appConfig.root);
@@ -44,6 +47,13 @@ export function getWebpackCommonConfig(
4447
}));
4548
}
4649

50+
if (progress) {
51+
extraPlugins.push(new ProgressPlugin({
52+
profile: verbose,
53+
colors: true
54+
}));
55+
}
56+
4757
return {
4858
devtool: sourcemap ? 'source-map' : false,
4959
resolve: {

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,15 @@ declare module 'webpack' {
1414
}
1515
}
1616

17-
export const getWebpackProdConfigPartial = function(projectRoot: string, appConfig: any) {
17+
export const getWebpackProdConfigPartial = function(projectRoot: string,
18+
appConfig: any,
19+
verbose: any) {
1820
const appRoot = path.resolve(projectRoot, appConfig.root);
1921
const styles = appConfig.styles
2022
? appConfig.styles.map((style: string) => path.resolve(appRoot, style))
2123
: [];
2224
const cssLoaders = ['css-loader?sourcemap&minimize', 'postcss-loader'];
25+
2326
return {
2427
output: {
2528
path: path.resolve(projectRoot, appConfig.outDir),
@@ -57,7 +60,7 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
5760
}),
5861
new webpack.optimize.UglifyJsPlugin(<any>{
5962
mangle: { screw_ie8 : true },
60-
compress: { screw_ie8: true },
63+
compress: { screw_ie8: true, warnings: verbose },
6164
sourceMap: true
6265
}),
6366
new CompressionPlugin({

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

+5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const webpackLoader = g['angularCliIsLocal']
1010
? g.angularCliPackages['@ngtools/webpack'].main
1111
: '@ngtools/webpack';
1212

13+
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
1314

1415
const getWebpackTestConfig = function (projectRoot, environment, appConfig, testConfig) {
1516

@@ -49,6 +50,10 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig, test
4950
}))
5051
}
5152

53+
if (testConfig.progress) {
54+
extraPlugins.push(new ProgressPlugin({ colors: true }));
55+
}
56+
5257
return {
5358
devtool: testConfig.sourcemap ? 'inline-source-map' : 'eval',
5459
context: path.resolve(__dirname, './'),

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

+18-8
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,30 @@ export const ngAppResolve = (resolvePath: string): string => {
44
return path.resolve(process.cwd(), resolvePath);
55
};
66

7-
export const webpackOutputOptions = {
7+
const webpackOutputOptions = {
88
colors: true,
9+
hash: true,
10+
timings: true,
911
chunks: true,
12+
chunkModules: false,
13+
children: false, // listing all children is very noisy in AOT and hides warnings/errors
1014
modules: false,
1115
reasons: false,
12-
chunkModules: false
16+
warnings: true,
17+
assets: false, // listing all assets is very noisy when using assets directories
18+
version: false
1319
};
1420

15-
export const webpackDevServerOutputOptions = {
21+
const verboseWebpackOutputOptions = {
22+
children: true,
1623
assets: true,
17-
colors: true,
1824
version: true,
19-
hash: true,
20-
timings: true,
21-
chunks: false,
22-
chunkModules: false
25+
reasons: true,
26+
chunkModules: false // TODO: set to true when console to file output is fixed
2327
};
28+
29+
export function getWebpackStatsConfig(verbose = false) {
30+
return verbose
31+
? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions)
32+
: webpackOutputOptions;
33+
}

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

+8-4
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export class NgCliWebpackConfig {
2626
isAoT = false,
2727
sourcemap = true,
2828
vendorChunk = false,
29+
verbose = false,
30+
progress = true
2931
) {
3032
const config: CliConfig = CliConfig.fromProject();
3133
const appConfig = config.config.apps[0];
@@ -38,9 +40,11 @@ export class NgCliWebpackConfig {
3840
appConfig,
3941
baseHref,
4042
sourcemap,
41-
vendorChunk
43+
vendorChunk,
44+
verbose,
45+
progress
4246
);
43-
let targetConfigPartial = this.getTargetConfig(this.ngCliProject.root, appConfig);
47+
let targetConfigPartial = this.getTargetConfig(this.ngCliProject.root, appConfig, verbose);
4448
const typescriptConfigPartial = isAoT
4549
? getWebpackAotConfigPartial(this.ngCliProject.root, appConfig)
4650
: getWebpackNonAotConfigPartial(this.ngCliProject.root, appConfig);
@@ -62,12 +66,12 @@ export class NgCliWebpackConfig {
6266
);
6367
}
6468

65-
getTargetConfig(projectRoot: string, appConfig: any): any {
69+
getTargetConfig(projectRoot: string, appConfig: any, verbose: boolean): any {
6670
switch (this.target) {
6771
case 'development':
6872
return getWebpackDevConfigPartial(projectRoot, appConfig);
6973
case 'production':
70-
return getWebpackProdConfigPartial(projectRoot, appConfig);
74+
return getWebpackProdConfigPartial(projectRoot, appConfig, verbose);
7175
default:
7276
throw new Error("Invalid build target. Only 'development' and 'production' are available.");
7377
}

‎packages/angular-cli/plugins/karma.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ const init = (config) => {
1313
const testConfig = {
1414
codeCoverage: config.angularCli.codeCoverage || false,
1515
lint: config.angularCli.lint || false,
16-
sourcemap: config.angularCli.sourcemap
16+
sourcemap: config.angularCli.sourcemap,
17+
progress: config.angularCli.progress
1718
}
1819

1920
// add webpack config

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

+6-7
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import * as rimraf from 'rimraf';
22
import * as path from 'path';
33
const Task = require('../ember-cli/lib/models/task');
44
import * as webpack from 'webpack';
5-
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
65
import { NgCliWebpackConfig } from '../models/webpack-config';
7-
import { webpackOutputOptions } from '../models/';
6+
import { getWebpackStatsConfig } from '../models/';
87
import { BuildOptions } from '../commands/build';
98
import { CliConfig } from '../models/config';
109

@@ -26,13 +25,13 @@ export default Task.extend({
2625
runTaskOptions.baseHref,
2726
runTaskOptions.aot,
2827
runTaskOptions.sourcemap,
29-
runTaskOptions.vendorChunk
28+
runTaskOptions.vendorChunk,
29+
runTaskOptions.verbose,
30+
runTaskOptions.progress
3031
).config;
3132
const webpackCompiler: any = webpack(config);
3233

33-
webpackCompiler.apply(new ProgressPlugin({
34-
profile: true
35-
}));
34+
const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose);
3635

3736
return new Promise((resolve, reject) => {
3837
webpackCompiler.watch({}, (err: any, stats: any) => {
@@ -45,7 +44,7 @@ export default Task.extend({
4544

4645
if (stats.hash !== lastHash) {
4746
lastHash = stats.hash;
48-
process.stdout.write(stats.toString(webpackOutputOptions) + '\n');
47+
process.stdout.write(stats.toString(statsConfig) + '\n');
4948
}
5049
});
5150
});

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

+6-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const Task = require('../ember-cli/lib/models/task');
44
import * as webpack from 'webpack';
55
import { BuildOptions } from '../commands/build';
66
import { NgCliWebpackConfig } from '../models/webpack-config';
7-
import { webpackOutputOptions } from '../models/';
7+
import { getWebpackStatsConfig } from '../models/';
88
import { CliConfig } from '../models/config';
99

1010
// Configure build and output;
@@ -25,16 +25,14 @@ export default <any>Task.extend({
2525
runTaskOptions.baseHref,
2626
runTaskOptions.aot,
2727
runTaskOptions.sourcemap,
28-
runTaskOptions.vendorChunk
28+
runTaskOptions.vendorChunk,
29+
runTaskOptions.verbose,
30+
runTaskOptions.progress
2931
).config;
3032

3133
const webpackCompiler: any = webpack(config);
3234

33-
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
34-
35-
webpackCompiler.apply(new ProgressPlugin({
36-
profile: true
37-
}));
35+
const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose);
3836

3937
return new Promise((resolve, reject) => {
4038
webpackCompiler.run((err: any, stats: any) => {
@@ -46,7 +44,7 @@ export default <any>Task.extend({
4644

4745
if (stats.hash !== lastHash) {
4846
lastHash = stats.hash;
49-
process.stdout.write(stats.toString(webpackOutputOptions) + '\n');
47+
process.stdout.write(stats.toString(statsConfig) + '\n');
5048
}
5149

5250
return stats.hasErrors() ? reject() : resolve();

0 commit comments

Comments
 (0)