fix(@angular-devkit/build-angular): add sourcemap comment for ES2015 differential loading (#15461)

Fixes #15460

Author: clydin

packages/angular_devkit/build_angular/src/utils/process-bundle.ts

@@ -201,17 +201,11 @@ async function mangleOriginal(options: ProcessBundleOptions): Promise<void> {
     throw resultOriginal.error;
   }
 
-  if (options.cachePath && options.cacheKeys && options.cacheKeys[CacheKey.OriginalCode]) {
-    await cacache.put(
-      options.cachePath,
-      options.cacheKeys[CacheKey.OriginalCode],
-      resultOriginal.code,
-    );
-  }
-
-  fs.writeFileSync(options.filename, resultOriginal.code);
-
   if (resultOriginal.map) {
+    if (!options.hiddenSourceMaps) {
+      resultOriginal.code += `\n//# sourceMappingURL=${path.basename(options.filename)}.map`;
+    }
+
     if (options.cachePath && options.cacheKeys && options.cacheKeys[CacheKey.OriginalMap]) {
       await cacache.put(
         options.cachePath,
@@ -222,4 +216,14 @@ async function mangleOriginal(options: ProcessBundleOptions): Promise<void> {
 
     fs.writeFileSync(options.filename + '.map', resultOriginal.map);
   }
+
+  if (options.cachePath && options.cacheKeys && options.cacheKeys[CacheKey.OriginalCode]) {
+    await cacache.put(
+      options.cachePath,
+      options.cacheKeys[CacheKey.OriginalCode],
+      resultOriginal.code,
+    );
+  }
+
+  fs.writeFileSync(options.filename, resultOriginal.code);
 }

tests/legacy-cli/e2e/tests/build/sourcemap.ts

@@ -1,20 +1,35 @@
-import {ng} from '../../utils/process';
-import {expectFileToExist} from '../../utils/fs';
-import {expectToFail} from '../../utils/utils';
+import * as fs from 'fs';
+import { expectFileToExist } from '../../utils/fs';
+import { ng } from '../../utils/process';
 
+export default async function() {
+  await ng('build', '--prod', '--output-hashing=none', '--source-map');
 
-export default function() {
-  // TODO(architect): Delete this test. It is now in devkit/build-angular.
+  await expectFileToExist('dist/test-project/main-es5.js.map');
 
-  return ng('build', '--source-map')
-    .then(() => expectFileToExist('dist/test-project/main-es5.js.map'))
+  const files = fs.readdirSync('./dist/test-project');
 
-    .then(() => ng('build', '--source-map', 'false'))
-    .then(() => expectToFail(() => expectFileToExist('dist/test-project/main-es5.js.map')))
+  let count = 0;
+  for (const file of files) {
+    if (!file.endsWith('.js')) {
+      continue;
+    }
 
-    .then(() => ng('build', '--optimization', '--output-hashing=none', '--source-map', 'false'))
-    .then(() => expectToFail(() => expectFileToExist('dist/test-project/main-es5.js.map')))
+    ++count;
 
-    .then(() => ng('build', '--optimization', '--output-hashing=none', '--source-map'))
-    .then(() => expectFileToExist('dist/test-project/main-es5.js.map'));
+    if (!files.includes(file + '.map')) {
+      throw new Error('Sourcemap not generated for ' + file);
+    }
+
+    const content = fs.readFileSync('./dist/test-project/' + file, 'utf8');
+    const lastLineIndex = content.lastIndexOf('\n');
+    const comment = lastLineIndex !== -1 && content.slice(lastLineIndex).trim();
+    if (comment !== `//# sourceMappingURL=${file}.map`) {
+      throw new Error('Sourcemap comment not generated for ' + file);
+    }
+  }
+
+  if (count < 6) {
+    throw new Error('Javascript file count is low');
+  }
 }