diff --git a/packages/angular-cli/commands/build.ts b/packages/angular-cli/commands/build.ts index 744b405fe567..91c0291a005c 100644 --- a/packages/angular-cli/commands/build.ts +++ b/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) { diff --git a/packages/angular-cli/commands/serve.ts b/packages/angular-cli/commands/serve.ts index 7c16c49993b8..ebd87da7b3f6 100644 --- a/packages/angular-cli/commands/serve.ts +++ b/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, diff --git a/packages/angular-cli/commands/test.ts b/packages/angular-cli/commands/test.ts index 2ac4f304d9c7..31864b854906 100644 --- a/packages/angular-cli/commands/test.ts +++ b/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 }, diff --git a/packages/angular-cli/models/webpack-build-production.ts b/packages/angular-cli/models/webpack-build-production.ts index 3ff408ad9a07..70020b902781 100644 --- a/packages/angular-cli/models/webpack-build-production.ts +++ b/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({ 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 c23801c3c3f0..fe7be77ecca9 100644 --- a/packages/angular-cli/models/webpack-build-test.js +++ b/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, './'), 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 6317fef937a3..31f3d33b5de6 100644 --- a/packages/angular-cli/models/webpack-config.ts +++ b/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."); } diff --git a/packages/angular-cli/plugins/karma.js b/packages/angular-cli/plugins/karma.js index 983157f3fdca..e09e379fc55f 100644 --- a/packages/angular-cli/plugins/karma.js +++ b/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 diff --git a/packages/angular-cli/tasks/build-webpack-watch.ts b/packages/angular-cli/tasks/build-webpack-watch.ts index 700c977298e4..5af0b7285432 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'; @@ -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'); } }); }); diff --git a/packages/angular-cli/tasks/build-webpack.ts b/packages/angular-cli/tasks/build-webpack.ts index 80fc0b9e62a5..68188478b544 100644 --- a/packages/angular-cli/tasks/build-webpack.ts +++ b/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,7 +24,8 @@ export default Task.extend({ runTaskOptions.environment, outputDir, runTaskOptions.baseHref, - runTaskOptions.aot + runTaskOptions.aot, + runTaskOptions.verbose ).config; // fail on build error @@ -31,11 +33,16 @@ export default Task.extend({ 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 Task.extend({ if (stats.hash !== lastHash) { lastHash = stats.hash; - process.stdout.write(stats.toString(webpackOutputOptions) + '\n'); + process.stdout.write(stats.toString(statsOptions) + '\n'); } resolve(); }); diff --git a/packages/angular-cli/tasks/serve-webpack.ts b/packages/angular-cli/tasks/serve-webpack.ts index 9c2e0a6229ad..e48a13be89ec 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,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() })); } diff --git a/packages/angular-cli/tasks/test.ts b/packages/angular-cli/tasks/test.ts index e539c075199a..b82531e98dee 100644 --- a/packages/angular-cli/tasks/test.ts +++ b/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