Skip to content

fix(@angular-devkit/build-angular): provided earlier build feedback in console #20960

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 31, 2021
Merged

fix(@angular-devkit/build-angular): provided earlier build feedback in console #20960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 61 additions & 61 deletions packages/angular_devkit/build_angular/src/dev-server/index.ts
View file
Open in desktop
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
Open in desktop
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)...`);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the root change.


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