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

Author: alan-agius4

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -128,7 +128,7 @@ async function initialize(
   options: BrowserBuilderSchema,
   context: BuilderContext,
   host: virtualFs.Host<fs.Stats>,
-  differentialLoadingMode: boolean,
+  differentialLoadingNeeded: boolean,
   webpackConfigurationTransform?: ExecutionTransformer<webpack.Configuration>,
 ): 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,

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(
-      '<script src="runtime.js" type="module"></script>' +
-      '<script src="polyfills.js" type="module"></script>' +
-      '<script src="vendor.js" type="module"></script>' +
-      '<script src="main.js" type="module"></script>',
+      '<script src="runtime-es2015.js" type="module"></script>' +
+      '<script src="polyfills-es2015.js" type="module"></script>' +
+      '<script src="vendor-es2015.js" type="module"></script>' +
+      '<script src="main-es2015.js" type="module"></script>',
     );
   });
 });

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': '<script src="runtime.js" type="module"></script>'
-        + '<script src="polyfills.js" type="module"></script>'
+      'main-es2015.js': 'input-script',
+      'index.html': '<script src="runtime-es2015.js" type="module"></script>'
+        + '<script src="polyfills-es2015.js" type="module"></script>'
         + '<script src="scripts.js" defer></script>'
         + '<script src="renamed-script.js" defer></script>'
-        + '<script src="vendor.js" type="module"></script>'
-        + '<script src="main.js" type="module"></script>',
+        + '<script src="vendor-es2015.js" type="module"></script>'
+        + '<script src="main-es2015.js" type="module"></script>',
     };
 
     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, {

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 {

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');

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,
     ));
   }

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(

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');
+}