From b050bb194d19b61c22729cad04ffc88ad10030a5 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Mon, 11 Jan 2021 19:45:59 +0100 Subject: [PATCH] fix(@angular-devkit/build-angular): generate consistent filenames With this change we generate consistent file names when using the browser builder in watch mode with differential loading. Closes #15157 --- .../build_angular/src/browser/index.ts | 7 +++--- .../specs/differential_loading_spec.ts | 24 +++++++++---------- .../src/browser/specs/scripts-array_spec.ts | 12 +++++----- .../build_angular/src/utils/build-options.ts | 2 +- .../src/utils/webpack-browser-config.ts | 2 +- .../src/webpack/configs/browser.ts | 2 +- .../src/webpack/configs/common.ts | 4 ++-- .../tests/build/differential-loading-watch.ts | 14 +++++++++++ 8 files changed, 40 insertions(+), 27 deletions(-) create mode 100644 tests/legacy-cli/e2e/tests/build/differential-loading-watch.ts diff --git a/packages/angular_devkit/build_angular/src/browser/index.ts b/packages/angular_devkit/build_angular/src/browser/index.ts index b56aad3669d7..c6dec18a53b1 100644 --- a/packages/angular_devkit/build_angular/src/browser/index.ts +++ b/packages/angular_devkit/build_angular/src/browser/index.ts @@ -128,7 +128,7 @@ async function initialize( options: BrowserBuilderSchema, context: BuilderContext, host: virtualFs.Host, - differentialLoadingMode: boolean, + differentialLoadingNeeded: boolean, webpackConfigurationTransform?: ExecutionTransformer, ): Promise<{ config: webpack.Configuration; @@ -159,7 +159,7 @@ async function initialize( wco.buildOptions.webWorkerTsConfig ? getWorkerConfig(wco) : {}, ], host, - { differentialLoadingMode }, + { differentialLoadingNeeded }, ); // Validate asset option values if processed directly @@ -225,7 +225,6 @@ export function buildWebpackBrowser( const target = compilerOptions.target || ScriptTarget.ES5; const buildBrowserFeatures = new BuildBrowserFeatures(sysProjectRoot); const isDifferentialLoadingNeeded = buildBrowserFeatures.isDifferentialLoadingNeeded(target); - const differentialLoadingMode = !options.watch && isDifferentialLoadingNeeded; if (target > ScriptTarget.ES2015 && isDifferentialLoadingNeeded) { context.logger.warn(tags.stripIndent` @@ -249,7 +248,7 @@ export function buildWebpackBrowser( } return { - ...(await initialize(options, context, host, differentialLoadingMode, transforms.webpackConfiguration)), + ...(await initialize(options, context, host, isDifferentialLoadingNeeded, transforms.webpackConfiguration)), buildBrowserFeatures, isDifferentialLoadingNeeded, target, diff --git a/packages/angular_devkit/build_angular/src/browser/specs/differential_loading_spec.ts b/packages/angular_devkit/build_angular/src/browser/specs/differential_loading_spec.ts index 3e20cda27937..1d66ab12631a 100644 --- a/packages/angular_devkit/build_angular/src/browser/specs/differential_loading_spec.ts +++ b/packages/angular_devkit/build_angular/src/browser/specs/differential_loading_spec.ts @@ -148,17 +148,17 @@ describe('Browser Builder with differential loading', () => { 'favicon.ico', 'index.html', - 'main.js', - 'main.js.map', + 'main-es2015.js', + 'main-es2015.js.map', - 'polyfills.js', - 'polyfills.js.map', + 'polyfills-es2015.js', + 'polyfills-es2015.js.map', - 'runtime.js', - 'runtime.js.map', + 'runtime-es2015.js', + 'runtime-es2015.js.map', - 'vendor.js', - 'vendor.js.map', + 'vendor-es2015.js', + 'vendor-es2015.js.map', 'styles.css', 'styles.css.map', @@ -202,10 +202,10 @@ describe('Browser Builder with differential loading', () => { const { files } = await browserBuild(architect, host, target, { watch: true }); expect(await files['index.html']).toContain( - '' + - '' + - '' + - '', + '' + + '' + + '' + + '', ); }); }); diff --git a/packages/angular_devkit/build_angular/src/browser/specs/scripts-array_spec.ts b/packages/angular_devkit/build_angular/src/browser/specs/scripts-array_spec.ts index 29e004bf8428..1f8f5cd6aab4 100644 --- a/packages/angular_devkit/build_angular/src/browser/specs/scripts-array_spec.ts +++ b/packages/angular_devkit/build_angular/src/browser/specs/scripts-array_spec.ts @@ -81,20 +81,20 @@ describe('Browser Builder scripts array', () => { 'lazy-script.js': 'lazy-script', 'renamed-script.js': 'pre-rename-script', 'renamed-lazy-script.js': 'pre-rename-lazy-script', - 'main.js': 'input-script', - 'index.html': '' - + '' + 'main-es2015.js': 'input-script', + 'index.html': '' + + '' + '' + '' - + '' - + '', + + '' + + '', }; host.writeMultipleFiles(scripts); host.appendToFile('src/main.ts', '\nimport \'./input-script.js\';'); // Enable differential loading - host.appendToFile('.browserslistrc', '\nIE 10'); + host.appendToFile('.browserslistrc', '\nIE 11'); // Remove styles so we don't have to account for them in the index.html order check. const { files } = await browserBuild(architect, host, target, { diff --git a/packages/angular_devkit/build_angular/src/utils/build-options.ts b/packages/angular_devkit/build_angular/src/utils/build-options.ts index f81818cb35a9..213dd5a80396 100644 --- a/packages/angular_devkit/build_angular/src/utils/build-options.ts +++ b/packages/angular_devkit/build_angular/src/utils/build-options.ts @@ -79,7 +79,7 @@ export interface BuildOptions { experimentalRollupPass?: boolean; allowedCommonJsDependencies?: string[]; - differentialLoadingMode?: boolean; + differentialLoadingNeeded?: boolean; } export interface WebpackTestOptions extends BuildOptions { diff --git a/packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts b/packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts index 9f3cd498f2c0..19ec267dadef 100644 --- a/packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts +++ b/packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts @@ -104,7 +104,7 @@ export async function generateWebpackConfig( if (profilingEnabled) { const esVersionInFileName = getEsVersionForFileName( tsConfig.options.target, - buildOptions.differentialLoadingMode, + buildOptions.differentialLoadingNeeded, ); const SpeedMeasurePlugin = await import('speed-measure-webpack-plugin'); diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/browser.ts b/packages/angular_devkit/build_angular/src/webpack/configs/browser.ts index fadbd53fb8b9..4ed2d4abf67b 100644 --- a/packages/angular_devkit/build_angular/src/webpack/configs/browser.ts +++ b/packages/angular_devkit/build_angular/src/webpack/configs/browser.ts @@ -54,7 +54,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati extraPlugins.push(getSourceMapDevTool( scriptsSourceMap, stylesSourceMap, - buildOptions.differentialLoadingMode ? true : hiddenSourceMap, + buildOptions.differentialLoadingNeeded && !buildOptions.watch ? true : hiddenSourceMap, false, )); } diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts index 14ca42be5830..781e4e64d70b 100644 --- a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts +++ b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts @@ -77,7 +77,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration { const targetInFileName = getEsVersionForFileName( tsConfig.options.target, - buildOptions.differentialLoadingMode, + buildOptions.differentialLoadingNeeded, ); if (buildOptions.main) { @@ -128,7 +128,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration { } } - const differentialLoadingMode = buildOptions.differentialLoadingMode; + const differentialLoadingMode = buildOptions.differentialLoadingNeeded && !buildOptions.watch; if (platform !== 'server') { if (differentialLoadingMode || tsConfig.options.target === ScriptTarget.ES5) { const buildBrowserFeatures = new BuildBrowserFeatures( diff --git a/tests/legacy-cli/e2e/tests/build/differential-loading-watch.ts b/tests/legacy-cli/e2e/tests/build/differential-loading-watch.ts new file mode 100644 index 000000000000..6c60d6328f5a --- /dev/null +++ b/tests/legacy-cli/e2e/tests/build/differential-loading-watch.ts @@ -0,0 +1,14 @@ +import { expectFileToExist, replaceInFile } from '../../utils/fs'; +import { execAndWaitForOutputToMatch } from '../../utils/process'; + +export default async function () { + await replaceInFile( + '.browserslistrc', + 'not IE 11', + 'IE 11', + ); + + await execAndWaitForOutputToMatch('ng', ['build', '--watch'], /Initial Total/i); + await expectFileToExist('dist/test-project/runtime-es2015.js'); + await expectFileToExist('dist/test-project/main-es2015.js'); +}