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

…dles 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. (cherry picked from commit bcb41e3)
angular · Jul 13, 2020 · 967a3db · 967a3db
1 parent 0f9f797
commit 967a3db
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
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
@@ -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');

diff --git a/packages/angular_devkit/build_angular/src/utils/process-bundle.ts b/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(