fix(@angular-devkit/build-angular): add crossorigin attribute to lazy chunks

Fixes angular#16801

Author: alan-agius4

packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts

@@ -13,6 +13,7 @@ import { ParsedConfiguration } from '@angular/compiler-cli';
 import {
   AssetPatternClass,
   Budget,
+  CrossOrigin,
   ExtraEntryPoint,
   I18NMissingTranslation,
   Localize,
@@ -58,6 +59,7 @@ export interface BuildOptions {
   showCircularDependencies?: boolean;
   buildOptimizer?: boolean;
   namedChunks?: boolean;
+  crossOrigin?: CrossOrigin;
   subresourceIntegrity?: boolean;
   serviceWorker?: boolean;
   webWorkerTsConfig?: string;

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts

@@ -15,6 +15,16 @@ const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');
 
 export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configuration {
   const { buildOptions } = wco;
+  const {
+    crossOrigin = 'none',
+    subresourceIntegrity,
+    evalSourceMap,
+    extractLicenses,
+    vendorChunk,
+    commonChunk,
+    styles,
+  } = buildOptions;
+
   const extraPlugins = [];
 
   let isEval = false;
@@ -27,27 +37,27 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
 
   // See https://webpack.js.org/configuration/devtool/ for sourcemap types.
   if ((stylesSourceMap || scriptsSourceMap) &&
-    buildOptions.evalSourceMap &&
+    evalSourceMap &&
     !stylesOptimization &&
     !scriptsOptimization) {
     // Produce eval sourcemaps for development with serve, which are faster.
     isEval = true;
   }
 
-  if (buildOptions.subresourceIntegrity) {
+  if (subresourceIntegrity) {
     extraPlugins.push(new SubresourceIntegrityPlugin({
       hashFuncNames: ['sha384'],
     }));
   }
 
-  if (buildOptions.extractLicenses) {
+  if (extractLicenses) {
     extraPlugins.push(new LicenseWebpackPlugin({
       stats: {
         warnings: false,
         errors: false,
       },
       perChunkOutput: false,
-      outputFilename: `3rdpartylicenses.txt`,
+      outputFilename: '3rdpartylicenses.txt',
     }));
   }
 
@@ -59,9 +69,16 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
     ));
   }
 
-  const globalStylesBundleNames = normalizeExtraEntryPoints(buildOptions.styles, 'styles')
+  const globalStylesBundleNames = normalizeExtraEntryPoints(styles, 'styles')
     .map(style => style.bundleName);
 
+  let crossOriginLoading: string | false = false;
+  if (subresourceIntegrity && crossOrigin === 'none') {
+    crossOriginLoading = 'anonymous';
+  } else if (crossOrigin !== 'none') {
+    crossOriginLoading = crossOrigin;
+  }
+
   return {
     devtool: isEval ? 'eval' : false,
     resolve: {
@@ -71,27 +88,27 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
       ],
     },
     output: {
-      crossOriginLoading: buildOptions.subresourceIntegrity ? 'anonymous' : false,
+      crossOriginLoading,
     },
     optimization: {
       runtimeChunk: 'single',
       splitChunks: {
         maxAsyncRequests: Infinity,
         cacheGroups: {
-          default: !!buildOptions.commonChunk && {
+          default: !!commonChunk && {
             chunks: 'async',
             minChunks: 2,
             priority: 10,
           },
-          common: !!buildOptions.commonChunk && {
+          common: !!commonChunk && {
             name: 'common',
             chunks: 'async',
             minChunks: 2,
             enforce: true,
             priority: 5,
           },
           vendors: false,
-          vendor: !!buildOptions.vendorChunk && {
+          vendor: !!vendorChunk && {
             name: 'vendor',
             chunks: 'initial',
             enforce: true,

packages/angular_devkit/build_angular/test/browser/cross-origin_spec_large.ts

@@ -86,4 +86,20 @@ describe('Browser Builder crossOrigin', () => {
     );
     await run.stop();
   });
+
+  it('works for lazy chunks', async () => {
+    host.writeMultipleFiles({
+      'src/lazy-module.ts': 'export const value = 100;',
+      'src/main.ts': `import('./lazy-module');`,
+    });
+
+    const overrides = { crossOrigin: CrossOrigin.UseCredentials };
+    const run = await architect.scheduleTarget(targetSpec, overrides);
+    const output = (await run.result) as BrowserBuilderOutput;
+    expect(output.success).toBe(true);
+
+    const fileName = join(normalize(output.outputPath), 'runtime.js');
+    const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise());
+    expect(content).toContain('script.crossOrigin = "use-credentials"');
+  });
 });