From 0bfcaef578e5aa58b6cfdb77a6f5f1b40f76ed34 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Mon, 15 Jul 2019 12:45:28 -0400 Subject: [PATCH] feat(@angular-devkit/build-angular): add defer attributes to classic scripts This change synchronizes the behavior of classic scripts and module scripts (`type="module"`). Module scripts are deferred by default. Also, certain injected scripts are not considered module scripts even in a ES2015+ build due to the strict mode behavior of module scripts. Deferring such scripts also ensures consistent execution in those scenarios. --- .../index-file/augment-index-html.ts | 6 ++- .../index-file/augment-index-html_spec.ts | 16 +++---- .../test/browser/cross-origin_spec_large.ts | 30 ++++++------- .../test/browser/index_spec_large.ts | 42 +++++++++---------- .../test/browser/scripts-array_spec_large.ts | 12 +++--- .../test/browser/service-worker_spec_large.ts | 4 +- .../test/browser/styles_spec_large.ts | 12 +++--- .../test/dev-server/index_spec_large.ts | 12 +++--- .../e2e/tests/basic/scripts-array.ts | 12 +++--- .../e2e/tests/basic/styles-array.ts | 8 ++-- tests/legacy-cli/e2e/tests/build/polyfills.ts | 8 ++-- .../e2e/tests/build/styles/extract-css.ts | 20 ++++----- tests/legacy-cli/e2e/tests/misc/support-ie.ts | 34 +++++++-------- .../e2e/tests/misc/support-safari-10.1.ts | 22 +++++----- .../e2e/tests/third-party/bootstrap.ts | 18 ++++---- 15 files changed, 130 insertions(+), 126 deletions(-) diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts index 3b42e21df687..bc1591bad662 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts +++ b/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts @@ -150,10 +150,14 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise const isModuleType = moduleFiles.some(scriptPredictor); if (isNoModuleType && !isModuleType) { - attrs.push({ name: 'nomodule', value: null }); + attrs.push({ name: 'nomodule', value: null }, { name: 'defer', value: null }); } else if (isModuleType && !isNoModuleType) { attrs.push({ name: 'type', value: 'module' }); + } else { + attrs.push({ name: 'defer', value: null }); } + } else { + attrs.push({ name: 'defer', value: null }); } if (params.sri) { diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html_spec.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html_spec.ts index fb8a444d9063..269c0ef43c55 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html_spec.ts +++ b/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html_spec.ts @@ -41,9 +41,9 @@ describe('augment-index-html', () => { - - - + + + `); @@ -84,10 +84,10 @@ describe('augment-index-html', () => { - - + + - + `); @@ -124,9 +124,9 @@ describe('augment-index-html', () => { - + - + `); diff --git a/packages/angular_devkit/build_angular/test/browser/cross-origin_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/cross-origin_spec_large.ts index 01a03a460cb5..1e787262a84e 100644 --- a/packages/angular_devkit/build_angular/test/browser/cross-origin_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/browser/cross-origin_spec_large.ts @@ -40,11 +40,11 @@ describe('Browser Builder crossOrigin', () => { expect(content).toBe( `` + `` + - `` + - `` + - `` + - `` + - ``, + `` + + `` + + `` + + `` + + ``, ); await run.stop(); }); @@ -59,11 +59,11 @@ describe('Browser Builder crossOrigin', () => { expect(content).toBe( `` + `` + - `` + - `` + - `` + - `` + - ``, + `` + + `` + + `` + + `` + + ``, ); await run.stop(); }); @@ -78,11 +78,11 @@ describe('Browser Builder crossOrigin', () => { expect(content).toBe( `` + `` + - `` + - `` + - `` + - `` + - ``, + `` + + `` + + `` + + `` + + ``, ); await run.stop(); }); diff --git a/packages/angular_devkit/build_angular/test/browser/index_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/index_spec_large.ts index 7b30b0f28102..9da24721f57c 100644 --- a/packages/angular_devkit/build_angular/test/browser/index_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/browser/index_spec_large.ts @@ -35,9 +35,9 @@ describe('Browser Builder index HTML processing', () => { const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise()); expect(content).toBe( `` - + `` - + `` - + ``, + + `` + + `` + + ``, ); await run.stop(); }); @@ -57,9 +57,9 @@ describe('Browser Builder index HTML processing', () => { const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise()); expect(content).toBe( `` - + `` - + `` - + ``, + + `` + + `` + + ``, ); await run.stop(); }); @@ -79,9 +79,9 @@ describe('Browser Builder index HTML processing', () => { const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise()); expect(content).toBe( `í ` - + `` - + `` - + ``, + + `` + + `` + + ``, ); await run.stop(); }); @@ -101,9 +101,9 @@ describe('Browser Builder index HTML processing', () => { const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise()); expect(content).toBe( `<%= csrf_meta_tags %> ` - + `` - + `` - + ``, + + `` + + `` + + ``, ); await run.stop(); }); @@ -146,9 +146,9 @@ describe('Browser Builder index HTML processing', () => { const content = await host.read(normalize(outputIndexPath)).toPromise(); expect(virtualFs.fileBufferToString(content)).toBe( `<%= csrf_meta_tags %> ` - + `` - + `` - + ``, + + `` + + `` + + ``, ); }); @@ -189,9 +189,9 @@ describe('Browser Builder index HTML processing', () => { const content = await host.read(normalize(outputIndexPath)).toPromise(); expect(virtualFs.fileBufferToString(content)).toBe( ` ` - + `` - + `` - + ``, + + `` + + `` + + ``, ); }); @@ -232,9 +232,9 @@ describe('Browser Builder index HTML processing', () => { const content = await host.read(normalize(outputIndexPath)).toPromise(); expect(virtualFs.fileBufferToString(content)).toBe( ` ` - + `` - + `` - + ``, + + `` + + `` + + ``, ); }); }); diff --git a/packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts index 615c3bf8b7c3..77edd2f02376 100644 --- a/packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts @@ -54,12 +54,12 @@ describe('Browser Builder scripts array', () => { 'renamed-script.js': 'pre-rename-script', 'renamed-lazy-script.js': 'pre-rename-lazy-script', 'main.js': 'input-script', - 'index.html': '' - + '' - + '' - + '' - + '' - + '', + 'index.html': '' + + '' + + '' + + '' + + '' + + '', }; host.writeMultipleFiles(scripts); diff --git a/packages/angular_devkit/build_angular/test/browser/service-worker_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/service-worker_spec_large.ts index 07508d8fcd82..3b70f2e5f477 100644 --- a/packages/angular_devkit/build_angular/test/browser/service-worker_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/browser/service-worker_spec_large.ts @@ -110,7 +110,7 @@ describe('Browser Builder service worker', () => { hashTable: { '/favicon.ico': '84161b857f5c547e3699ddfbffc6d8d737542e01', '/assets/folder-asset.txt': '617f202968a6a81050aa617c2e28e1dca11ce8d4', - '/index.html': '1bcafd53046ffb270ac5e6f3cab23e0442f95c4f', + '/index.html': 'f95e7a84949070c4984069b592be7969bc3187a0', '/spectrum.png': '8d048ece46c0f3af4b598a95fd8e4709b631c3c0', }, })); @@ -167,7 +167,7 @@ describe('Browser Builder service worker', () => { hashTable: { '/foo/bar/favicon.ico': '84161b857f5c547e3699ddfbffc6d8d737542e01', '/foo/bar/assets/folder-asset.txt': '617f202968a6a81050aa617c2e28e1dca11ce8d4', - '/foo/bar/index.html': '925d80777b6ba64b526b0be79761d254dfe94c65', + '/foo/bar/index.html': 'a5359e8e1a516683b32bbb2f9e8bf402dae4738e', }, })); diff --git a/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts index 0bbfd62e544b..4cd161a343a7 100644 --- a/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts @@ -54,12 +54,12 @@ describe('Browser Builder styles', () => { }; const jsIndexMatches: { [path: string]: string } = { 'index.html': - '' + - '' + - '' + - '' + - '' + - '', + '' + + '' + + '' + + '' + + '' + + '', }; host.writeMultipleFiles({ diff --git a/packages/angular_devkit/build_angular/test/dev-server/index_spec_large.ts b/packages/angular_devkit/build_angular/test/dev-server/index_spec_large.ts index 9ef1269cc1dd..22aca8912431 100644 --- a/packages/angular_devkit/build_angular/test/dev-server/index_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/dev-server/index_spec_large.ts @@ -76,7 +76,7 @@ describe('Dev Server Builder index', () => { '' + '' + '' + - '' + + '' + '' + '', ); @@ -96,11 +96,11 @@ describe('Dev Server Builder index', () => { expect(output.success).toBe(true); const response = await fetch('http://localhost:4200/index.html'); expect(await response.text()).toContain( - '' + - '' + - '' + - '' + - '', + '' + + '' + + '' + + '' + + '', ); await run.stop(); }); diff --git a/tests/legacy-cli/e2e/tests/basic/scripts-array.ts b/tests/legacy-cli/e2e/tests/basic/scripts-array.ts index a3a59832068f..504d7a12ee4e 100644 --- a/tests/legacy-cli/e2e/tests/basic/scripts-array.ts +++ b/tests/legacy-cli/e2e/tests/basic/scripts-array.ts @@ -67,14 +67,14 @@ export default function() { oneLineTrim` - - - - + + + + - - + + `, ), ) diff --git a/tests/legacy-cli/e2e/tests/basic/styles-array.ts b/tests/legacy-cli/e2e/tests/basic/styles-array.ts index 93565e3c1fca..0a89491cc5f1 100644 --- a/tests/legacy-cli/e2e/tests/basic/styles-array.ts +++ b/tests/legacy-cli/e2e/tests/basic/styles-array.ts @@ -55,12 +55,12 @@ export default function() { oneLineTrim` - - + + - - + + `, ), ) diff --git a/tests/legacy-cli/e2e/tests/build/polyfills.ts b/tests/legacy-cli/e2e/tests/build/polyfills.ts index 170574e17396..6c61ab6c919c 100644 --- a/tests/legacy-cli/e2e/tests/build/polyfills.ts +++ b/tests/legacy-cli/e2e/tests/build/polyfills.ts @@ -16,8 +16,8 @@ export default async function () { await expectFileToMatch('dist/test-project/index.html', oneLineTrim` - - + + `); const jitPolyfillSize = await getFileSize('dist/test-project/polyfills-es5.js'); @@ -30,7 +30,7 @@ export default async function () { await expectFileToMatch('dist/test-project/index.html', oneLineTrim` - - + + `); } diff --git a/tests/legacy-cli/e2e/tests/build/styles/extract-css.ts b/tests/legacy-cli/e2e/tests/build/styles/extract-css.ts index 89c213820aba..07ff403dc44e 100644 --- a/tests/legacy-cli/e2e/tests/build/styles/extract-css.ts +++ b/tests/legacy-cli/e2e/tests/build/styles/extract-css.ts @@ -74,12 +74,12 @@ export default function() { oneLineTrim` - - + + - - + + `, ), ) @@ -112,16 +112,16 @@ export default function() { oneLineTrim` - - + + - + - + - - + + `, ), ) diff --git a/tests/legacy-cli/e2e/tests/misc/support-ie.ts b/tests/legacy-cli/e2e/tests/misc/support-ie.ts index cb53aa43ff21..8f174b7059e5 100644 --- a/tests/legacy-cli/e2e/tests/misc/support-ie.ts +++ b/tests/legacy-cli/e2e/tests/misc/support-ie.ts @@ -18,22 +18,22 @@ export default async function () { await ng('build'); await expectFileNotToExist('dist/test-project/polyfills-es5.js'); await expectFileToMatch('dist/test-project/index.html', oneLineTrim` - - - - - + + + + + `); await ng('build', `--es5BrowserSupport`); await expectFileToMatch('dist/test-project/polyfills-es5.js', 'core-js'); await expectFileToMatch('dist/test-project/index.html', oneLineTrim` - - - - - - + + + + + + `); await updateJsonFile('angular.json', workspaceJson => { @@ -44,11 +44,11 @@ export default async function () { await ng('build'); await expectFileToMatch('dist/test-project/polyfills-es5.js', 'core-js'); await expectFileToMatch('dist/test-project/index.html', oneLineTrim` - - - - - - + + + + + + `); } diff --git a/tests/legacy-cli/e2e/tests/misc/support-safari-10.1.ts b/tests/legacy-cli/e2e/tests/misc/support-safari-10.1.ts index f78cb217bdcb..325fc84ee1f6 100644 --- a/tests/legacy-cli/e2e/tests/misc/support-safari-10.1.ts +++ b/tests/legacy-cli/e2e/tests/misc/support-safari-10.1.ts @@ -13,11 +13,11 @@ export default async function () { await expectFileNotToExist('dist/test-project/polyfills-es5.js'); await expectFileNotToExist('dist/test-project/polyfills-nomodule-es5.js'); await expectFileToMatch('dist/test-project/index.html', oneLineTrim` - - - - - + + + + + `); await writeFile('browserslist', ` @@ -27,16 +27,16 @@ export default async function () { await ng('build'); await expectFileToExist('dist/test-project/polyfills-nomodule-es5.js'); await expectFileToMatch('dist/test-project/index.html', oneLineTrim` - + - - + + - + - - + + `); } diff --git a/tests/legacy-cli/e2e/tests/third-party/bootstrap.ts b/tests/legacy-cli/e2e/tests/third-party/bootstrap.ts index 92aab3fa6972..69d8563c97ef 100644 --- a/tests/legacy-cli/e2e/tests/third-party/bootstrap.ts +++ b/tests/legacy-cli/e2e/tests/third-party/bootstrap.ts @@ -24,13 +24,13 @@ export default function() { .then(() => expectFileToMatch('dist/test-project/index.html', oneLineTrim` - - - + + + - - + + `)) .then(() => ng( 'build', @@ -44,10 +44,10 @@ export default function() { .then(() => expectFileToMatch('dist/test-project/index.html', oneLineTrim` - - - + + + - + `)); }