fix(@angular-devkit/build-angular): only add module script types to actual module scripts

Fixes #15102

Author: alan-agius4

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

@@ -40,6 +40,7 @@ import {
   getStatsConfig,
   getStylesConfig,
   getWorkerConfig,
+  normalizeExtraEntryPoints,
 } from '../angular-cli-files/models/webpack-configs';
 import {
   IndexHtmlTransform,
@@ -238,16 +239,16 @@ export function buildWebpackBrowser(
             let files: EmittedFiles[] | undefined;
 
             const [firstBuild, secondBuild] = buildEvents;
+            if (isDifferentialLoadingNeeded) {
+              const scriptsEntryPointName = normalizeExtraEntryPoints(options.scripts || [], 'scripts')
+                .map(x => x.bundleName);
 
-            if (buildEvents.length === 2) {
               moduleFiles = firstBuild.emittedFiles || [];
-              noModuleFiles = secondBuild.emittedFiles;
-              files = moduleFiles.filter(x => x.extension === '.css');
-            } else if (options.watch && isDifferentialLoadingNeeded) {
-              // differential loading is not enabled in watch mode
-              // but we still want to use module type tags
-              moduleFiles = firstBuild.emittedFiles || [];
-              files = moduleFiles.filter(x => x.extension === '.css');
+              files = moduleFiles.filter(x => x.extension === '.css' || (x.name && scriptsEntryPointName.includes(x.name)));
+
+              if (buildEvents.length === 2) {
+                noModuleFiles = secondBuild.emittedFiles;
+              }
             } else {
               const { emittedFiles = [] } = firstBuild;
               files = emittedFiles.filter(x => x.name !== 'polyfills-es5');

packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts

@@ -48,7 +48,7 @@ describe('Browser Builder scripts array', () => {
   afterEach(async () => host.restore().toPromise());
 
   it('works', async () => {
-    const matches: { [path: string]: string } = {
+    const matches: Record<string, string> = {
       'scripts.js': 'input-script',
       'lazy-script.js': 'lazy-script',
       'renamed-script.js': 'pre-rename-script',
@@ -71,8 +71,41 @@ describe('Browser Builder scripts array', () => {
       scripts: getScriptsOption(),
     } as {});
 
-    for (const fileName of Object.keys(matches)) {
-      expect(await files[fileName]).toMatch(matches[fileName]);
+    for (const [fileName, content] of Object.entries(matches)) {
+      expect(await files[fileName]).toMatch(content);
+    }
+  });
+
+  it('works in watch mode with differential loading', async () => {
+    const matches: Record<string, string> = {
+      'scripts.js': 'input-script',
+      '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>'
+        + '<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>',
+    };
+
+    host.writeMultipleFiles(scripts);
+    host.appendToFile('src/main.ts', '\nimport \'./input-script.js\';');
+    
+    // Enable differential loading
+    host.appendToFile('browserslist', '\nIE 10');
+
+    // Remove styles so we don't have to account for them in the index.html order check.
+    const { files } = await browserBuild(architect, host, target, {
+      styles: [],
+      scripts: getScriptsOption(),
+      watch: true,
+    } as {});
+
+    for (const [fileName, content] of Object.entries(matches)) {
+      expect(await files[fileName]).toMatch(content);
     }
   });