feat(@angular-devkit/build-angular): add ng-server-context when usi…

…ng app-shell builder With this change we configure the app-shell builder to set the `ɵSERVER_CONTEXT` private provider.
angular · Sep 23, 2022 · 4ead45c · 4ead45c
1 parent f0933d3
commit 4ead45c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/packages/angular_devkit/build_angular/BUILD.bazel b/packages/angular_devkit/build_angular/BUILD.bazel
@@ -106,6 +106,7 @@ ts_library(
         "@npm//@angular/compiler-cli",
         "@npm//@angular/core",
         "@npm//@angular/localize",
+        "@npm//@angular/platform-server",
         "@npm//@angular/service-worker",
         "@npm//@babel/core",
         "@npm//@babel/generator",
@@ -282,9 +283,6 @@ ts_library(
 
 LARGE_SPECS = {
     "app-shell": {
-        "extra_deps": [
-            "@npm//@angular/platform-server",
-        ],
         "tags": [
             # TODO: node crashes with an internal error on node16
             "node16-broken",

diff --git a/packages/angular_devkit/build_angular/src/builders/app-shell/app-shell_spec.ts b/packages/angular_devkit/build_angular/src/builders/app-shell/app-shell_spec.ts
@@ -140,7 +140,8 @@ describe('AppShell Builder', () => {
 
     const fileName = 'dist/index.html';
     const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
-    expect(content).toMatch(/Welcome to app!/);
+    expect(content).toMatch('Welcome to app');
+    expect(content).toMatch('ng-server-context="app-shell"');
   });
 
   it('works with route', async () => {

diff --git a/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts b/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts
@@ -13,6 +13,9 @@ import {
   targetFromTargetString,
 } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
+import type { Type } from '@angular/core';
+import type * as platformServer from '@angular/platform-server';
+import assert from 'assert';
 import * as fs from 'fs';
 import * as path from 'path';
 import { normalizeOptimization } from '../../utils';
@@ -74,24 +77,28 @@ async function _renderUniversal(
       localeDirectory,
     );
 
-    const { AppServerModule, renderModule } = await import(serverBundlePath);
+    const { AppServerModule, renderModule, ɵSERVER_CONTEXT } = (await import(serverBundlePath)) as {
+      renderModule: typeof platformServer.renderModule | undefined;
+      ɵSERVER_CONTEXT: typeof platformServer.ɵSERVER_CONTEXT | undefined;
+      AppServerModule: Type<unknown> | undefined;
+    };
 
-    const renderModuleFn: ((module: unknown, options: {}) => Promise<string>) | undefined =
-      renderModule;
-
-    if (!(renderModuleFn && AppServerModule)) {
-      throw new Error(
-        `renderModule method and/or AppServerModule were not exported from: ${serverBundlePath}.`,
-      );
-    }
+    assert(renderModule, `renderModule was not exported from: ${serverBundlePath}.`);
+    assert(AppServerModule, `AppServerModule was not exported from: ${serverBundlePath}.`);
+    assert(ɵSERVER_CONTEXT, `ɵSERVER_CONTEXT was not exported from: ${serverBundlePath}.`);
 
     // Load platform server module renderer
-    const renderOpts = {
+    let html = await renderModule(AppServerModule, {
       document: indexHtml,
       url: options.route,
-    };
+      extraProviders: [
+        {
+          provide: ɵSERVER_CONTEXT,
+          useValue: 'app-shell',
+        },
+      ],
+    });
 
-    let html = await renderModuleFn(AppServerModule, renderOpts);
     // Overwrite the client index file.
     const outputIndexPath = options.outputIndexPath
       ? path.join(root, options.outputIndexPath)