From 24787c3764cc2971ea3a9e30e9384017678cc771 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Wed, 17 Feb 2021 19:57:47 +0200 Subject: [PATCH] feat(@schematics/angular): augment `universal` schematics to import `platform-server` shims In angular/angular#40559, a new `@angular/platform-server/init` entry-point was introduced, which can be used to initialize the server environment by providing shims for APIs normally provided by the browser (such as DOM globals). If the project is using a version of Angular (and thus `@angular/platform-server`) that is known to include this new entry-point, the newly generated `main.server.ts` file should import it at the top in order to ensure that the shims will be available as soon as possible (before other direct or transitive imports that may rely on them). See also angular/angular#40559 for more details. NOTE: This `universal` schematic is the base for `app-shell`, `@nguniversal/express-engine` and `@nguniversal/hapi-engine`. Fixes angular/angular#40559 --- .../files/src/__main@stripTsExtension__.ts.template | 11 ++++++++++- packages/schematics/angular/universal/index_spec.ts | 8 ++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/schematics/angular/universal/files/src/__main@stripTsExtension__.ts.template b/packages/schematics/angular/universal/files/src/__main@stripTsExtension__.ts.template index 4e9897c5ae49..0a7e46d4d2fe 100644 --- a/packages/schematics/angular/universal/files/src/__main@stripTsExtension__.ts.template +++ b/packages/schematics/angular/universal/files/src/__main@stripTsExtension__.ts.template @@ -1,6 +1,15 @@ +/*************************************************************************************************** + * Initialize the server environment - for example, adding DOM built-in types to the global scope. + * + * NOTE: + * This import must come before any imports (direct or transitive) that rely on DOM built-ins being + * available, such as `@angular/elements`. + */ +import '@angular/platform-server/init'; + <% if (hasLocalizePackage) { %>/*************************************************************************************************** * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. -*/ + */ import '@angular/localize/init'; <% } %>import { enableProdMode } from '@angular/core'; diff --git a/packages/schematics/angular/universal/index_spec.ts b/packages/schematics/angular/universal/index_spec.ts index 86c4563ca7c5..47793f2e69e0 100644 --- a/packages/schematics/angular/universal/index_spec.ts +++ b/packages/schematics/angular/universal/index_spec.ts @@ -242,6 +242,14 @@ describe('Universal Schematic', () => { expect(tree.exists(filePath)).toEqual(true); }); + it(`should add import to '@angular/platform-server/init' in main file`, async () => { + const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree) + .toPromise(); + const filePath = '/projects/bar/src/main.server.ts'; + const contents = tree.readContent(filePath); + expect(contents).toContain('import \'@angular/platform-server/init\''); + }); + it(`should not add import to '@angular/localize' in main file when it's not a depedency`, async () => { const tree = await schematicRunner.runSchematicAsync('universal', defaultOptions, appTree) .toPromise();