Skip to content

Commit

Permalink
fix(@angular-devkit/build-angular): provided earlier build feedback i…
Browse files Browse the repository at this point in the history 
…n console

With this change we provide earlier feedback in the console during a build. The setup phase can take some times if the project has a large set of dependencies.

We also move several warnings in the dev-server to an earlier phase so that we don't clutter the progress indicator.

Closes #20957

(cherry picked from commit f9acdc7)
  • Loading branch information
@alan-agius4 @filipesilva
alan-agius4 authored and filipesilva committed May 31, 2021
1 parent 6c26421 commit 662a2b8
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 98 deletions.
122 changes: 61 additions & 61 deletions packages/angular_devkit/build_angular/src/dev-server/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,24 @@ const devServerBuildOverriddenKeys: (keyof DevServerBuilderOptions)[] = [
'deployUrl',
];

// Get dev-server only options.
type DevServerOptions = Partial<
Omit<
Schema,
| 'watch'
| 'optimization'
| 'aot'
| 'sourceMap'
| 'vendorChunk'
| 'commonChunk'
| 'baseHref'
| 'progress'
| 'poll'
| 'verbose'
| 'deployUrl'
>
>;

/**
* @experimental Direct usage of this type is considered experimental.
*/
Expand Down Expand Up @@ -119,23 +137,6 @@ export function serveWebpackBrowser(
{},
);

// Get dev-server only options.
type DevServerOptions = Partial<
Omit<
Schema,
| 'watch'
| 'optimization'
| 'aot'
| 'sourceMap'
| 'vendorChunk'
| 'commonChunk'
| 'baseHref'
| 'progress'
| 'poll'
| 'verbose'
| 'deployUrl'
>
>;
const devServerOptions: DevServerOptions = (Object.keys(options) as (keyof Schema)[])
.filter((key) => !devServerBuildOverriddenKeys.includes(key) && key !== 'browserTarget')
.reduce<DevServerOptions>(
Expand All @@ -156,6 +157,36 @@ export function serveWebpackBrowser(
logger.warn(`Warning: 'outputHashing' option is disabled when using the dev-server.`);
}

if (options.hmr) {
logger.warn(tags.stripIndents`NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
}

if (
!options.disableHostCheck &&
options.host &&
!/^127\.\d+\.\d+\.\d+/g.test(options.host) &&
options.host !== 'localhost'
) {
logger.warn(tags.stripIndent`
Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
`);
}

if (options.disableHostCheck) {
logger.warn(tags.oneLine`
Warning: Running a server with --disable-host-check is a security risk.
See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
for more information.
`);
}

// Webpack's live reload functionality adds the `strip-ansi` package which is commonJS
rawBrowserOptions.allowedCommonJsDependencies ??= [];
rawBrowserOptions.allowedCommonJsDependencies.push('strip-ansi');
Expand All @@ -166,6 +197,18 @@ export function serveWebpackBrowser(
browserName,
)) as json.JsonObject & BrowserBuilderSchema;

const { styles, scripts } = normalizeOptimization(browserOptions.optimization);
if (scripts || styles.minify) {
logger.error(tags.stripIndents`
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION!
****************************************************************************************
`);
}

const { config, projectRoot, i18n } = await generateI18nBrowserWebpackConfigFromContext(
browserOptions,
context,
Expand Down Expand Up @@ -220,36 +263,6 @@ export function serveWebpackBrowser(
}
}

if (options.hmr) {
logger.warn(tags.stripIndents`NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
}

if (
!options.disableHostCheck &&
options.host &&
!/^127\.\d+\.\d+\.\d+/g.test(options.host) &&
options.host !== 'localhost'
) {
logger.warn(tags.stripIndent`
Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
`);
}

if (options.disableHostCheck) {
logger.warn(tags.oneLine`
Warning: Running a server with --disable-host-check is a security risk.
See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
for more information.
`);
}

let locale: string | undefined;
if (i18n.shouldInline) {
// Dev-server only supports one locale
Expand Down Expand Up @@ -290,8 +303,6 @@ export function serveWebpackBrowser(

return from(setup()).pipe(
switchMap(({ browserOptions, webpackConfig, projectRoot, locale }) => {
const normalizedOptimization = normalizeOptimization(browserOptions.optimization);

if (browserOptions.index) {
const { scripts = [], styles = [], baseHref, tsConfig } = browserOptions;
const { options: compilerOptions } = readTsconfig(tsConfig, workspaceRoot);
Expand All @@ -315,25 +326,14 @@ export function serveWebpackBrowser(
deployUrl: browserOptions.deployUrl,
sri: browserOptions.subresourceIntegrity,
postTransform: transforms.indexHtml,
optimization: normalizedOptimization,
optimization: normalizeOptimization(browserOptions.optimization),
WOFFSupportNeeded: !buildBrowserFeatures.isFeatureSupported('woff2'),
crossOrigin: browserOptions.crossOrigin,
lang: locale,
}),
);
}

if (normalizedOptimization.scripts || normalizedOptimization.styles.minify) {
logger.error(tags.stripIndents`
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION!
****************************************************************************************
`);
}

return runWebpackDevServer(webpackConfig, context, {
logging: transforms.logging || createWebpackLoggingCallback(!!options.verbose, logger),
webpackFactory: require('webpack') as typeof webpack,
Expand Down
73 changes: 36 additions & 37 deletions packages/angular_devkit/build_angular/src/webpack/configs/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,42 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
buildOptions.differentialLoadingNeeded,
);

if (buildOptions.progress) {
const spinner = new Spinner();
spinner.start(`Generating ${platform} application bundles (phase: setup)...`);

let previousPercentage: number | undefined;
extraPlugins.push(
new ProgressPlugin({
handler: (percentage: number, message: string) => {
if (previousPercentage === 1 && percentage !== 0) {
// In some scenarios in Webpack 5 percentage goes from 1 back to 0.99.
// Ex: 0.99 -> 1 -> 0.99 -> 1
// This causes the "complete" message to be displayed multiple times.

return;
}

switch (percentage) {
case 1:
spinner.succeed(
`${platform.replace(/^\w/, (s) =>
s.toUpperCase(),
)} application bundle generation complete.`,
);
break;
case 0:
default:
spinner.text = `Generating ${platform} application bundles (phase: ${message})...`;
break;
}

previousPercentage = percentage;
},
}),
);
}

if (buildOptions.main) {
const mainPath = path.resolve(root, buildOptions.main);
entryPoints['main'] = [mainPath];
Expand Down Expand Up @@ -216,43 +252,6 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
);
}

if (buildOptions.progress) {
const spinner = new Spinner();

let previousPercentage: number | undefined;
extraPlugins.push(
new ProgressPlugin({
handler: (percentage: number, message: string) => {
if (previousPercentage === 1 && percentage !== 0) {
// In some scenarios in Webpack 5 percentage goes from 1 back to 0.99.
// Ex: 0.99 -> 1 -> 0.99 -> 1
// This causes the "complete" message to be displayed multiple times.

return;
}

switch (percentage) {
case 0:
spinner.start(`Generating ${platform} application bundles...`);
break;
case 1:
spinner.succeed(
`${platform.replace(/^\w/, (s) =>
s.toUpperCase(),
)} application bundle generation complete.`,
);
break;
default:
spinner.text = `Generating ${platform} application bundles (phase: ${message})...`;
break;
}

previousPercentage = percentage;
},
}),
);
}

if (buildOptions.showCircularDependencies) {
const CircularDependencyPlugin = require('circular-dependency-plugin');
extraPlugins.push(
Expand Down

0 comments on commit 662a2b8

Please sign in to comment.