fix(@angular-devkit/build-angular): wrap ES5 differential loading bundles

This change ensures that classic (ES5) script's top-level function helpers do not get overwritten by other scripts top-level functions that happen to have the same name.  This is not an issue when using module script types because each module has its own scope.

Author: clydin

packages/angular_devkit/build_angular/src/browser/specs/differential_loading_spec.ts

@@ -10,6 +10,7 @@ import { Architect } from '@angular-devkit/architect';
 import { PathFragment } from '@angular-devkit/core';
 import { browserBuild, createArchitect, host } from '../../test-utils';
 
+// tslint:disable-next-line: no-big-function
 describe('Browser Builder with differential loading', () => {
   const target = { project: 'app', target: 'build' };
   let architect: Architect;
@@ -181,6 +182,12 @@ describe('Browser Builder with differential loading', () => {
     expect(await files['main-es2015.js']).toContain('const ');
   });
 
+  it('wraps ES5 scripts in an IIFE', async () => {
+    const { files } = await browserBuild(architect, host, target, { optimization: false });
+    expect(await files['main-es5.js']).toMatch(/^\(function \(\) \{/);
+    expect(await files['main-es2015.js']).not.toMatch(/^\(function \(\) \{/);
+  });
+
   it('uses the right zone.js variant', async () => {
     const { files } = await browserBuild(architect, host, target, { optimization: false });
     expect(await files['polyfills-es5.js']).toContain('zone.js/dist/zone-legacy');

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

@@ -157,7 +157,10 @@ export async function process(options: ProcessBundleOptions): Promise<ProcessBun
           exclude: ['transform-typeof-symbol'],
         },
       ]],
-      plugins: options.replacements ? [createReplacePlugin(options.replacements)] : [],
+      plugins: [
+        createIifeWrapperPlugin(),
+        ...(options.replacements ? [createReplacePlugin(options.replacements)] : []),
+      ],
       minified: allowMinify && !!options.optimize,
       compact: !shouldBeautify && !!options.optimize,
       sourceMaps: !!sourceMap,
@@ -509,6 +512,36 @@ function createReplacePlugin(replacements: [string, string][]): PluginObj {
   };
 }
 
+function createIifeWrapperPlugin(): PluginObj {
+  return {
+    visitor: {
+      Program: {
+        exit(path: NodePath<types.Program>) {
+          // Save existing body and directives
+          const { body, directives } = path.node;
+
+          // Clear out body and directives for wrapper
+          path.node.body = [];
+          path.node.directives = [];
+
+          // Create the wrapper - "(function() { ... })();"
+          const wrapper = types.expressionStatement(
+            types.callExpression(
+              types.parenthesizedExpression(
+                types.functionExpression(undefined, [], types.blockStatement(body, directives)),
+              ),
+              [],
+            ),
+          );
+
+          // Insert the wrapper
+          path.pushContainer('body', wrapper);
+        },
+      },
+    },
+  };
+}
+
 const USE_LOCALIZE_PLUGINS = false;
 
 export async function createI18nPlugins(