diff --git a/packages/schematics/angular/universal/index.ts b/packages/schematics/angular/universal/index.ts index 6a1b38f49d..7af96ced11 100644 --- a/packages/schematics/angular/universal/index.ts +++ b/packages/schematics/angular/universal/index.ts @@ -141,9 +141,17 @@ function wrapBootstrapCall(mainFile: string): Rule { // indent contents const triviaWidth = bootstrapCall.getLeadingTriviaWidth(); const beforeText = - `document.addEventListener('DOMContentLoaded', () => {\n` + - ' '.repeat(triviaWidth > 2 ? triviaWidth + 1 : triviaWidth); - const afterText = `\n${triviaWidth > 2 ? ' '.repeat(triviaWidth - 1) : ''}});`; + `function bootstrap() {\n` + ' '.repeat(triviaWidth > 2 ? triviaWidth + 1 : triviaWidth); + const afterText = + `\n${triviaWidth > 2 ? ' '.repeat(triviaWidth - 1) : ''}};\n` + + ` + +if (document.readyState === 'complete') { + bootstrap(); +} else { + document.addEventListener('DOMContentLoaded', bootstrap); +} +`; // in some cases we need to cater for a trailing semicolon such as; // bootstrap().catch(err => console.log(err)); @@ -236,8 +244,8 @@ export default function (options: UniversalOptions): Rule { throw targetBuildNotFoundError(); } - const clientBuildOptions = ((clientBuildTarget.options || - {}) as unknown) as BrowserBuilderOptions; + const clientBuildOptions = (clientBuildTarget.options || + {}) as unknown as BrowserBuilderOptions; const clientTsConfig = normalize(clientBuildOptions.tsConfig); const tsConfigExtends = basename(clientTsConfig); diff --git a/packages/schematics/angular/universal/index_spec.ts b/packages/schematics/angular/universal/index_spec.ts index 4af28bf6ca..04eb9c08d0 100644 --- a/packages/schematics/angular/universal/index_spec.ts +++ b/packages/schematics/angular/universal/index_spec.ts @@ -191,7 +191,7 @@ describe('Universal Schematic', () => { .toPromise(); const filePath = '/projects/bar/src/main.ts'; const contents = tree.readContent(filePath); - expect(contents).toMatch(/document.addEventListener\('DOMContentLoaded', \(\) => {/); + expect(contents).toContain(`document.addEventListener('DOMContentLoaded', bootstrap);`); }); it('should wrap the bootstrap declaration in a DOMContentLoaded event handler', async () => { @@ -221,9 +221,7 @@ describe('Universal Schematic', () => { .runSchematicAsync('universal', defaultOptions, appTree) .toPromise(); const contents = tree.readContent(filePath); - expect(contents).toMatch( - /document.addEventListener\('DOMContentLoaded', \(\) => {[\n\r\s]+bootstrap\(\)/, - ); + expect(contents).toContain(`document.addEventListener('DOMContentLoaded', bootstrap);`); }); it('should install npm dependencies', async () => {