feat(@schematics/angular): update app-shell and ssr schematics to adopt new Server Rendering API

This commit revises the app-shell and ssr schematics to incorporate the new Server Rendering API, along with the integration of server-side routes.

BREAKING CHANGE: The app-shell schematic is no longer compatible with Webpack-based builders.

Author: alan-agius4

packages/angular/build/src/builders/application/execute-post-bundle.ts

@@ -29,7 +29,7 @@ import {
 } from '../../utils/server-rendering/models';
 import { prerenderPages } from '../../utils/server-rendering/prerender';
 import { augmentAppWithServiceWorkerEsbuild } from '../../utils/service-worker';
-import { INDEX_HTML_SERVER, NormalizedApplicationBuildOptions } from './options';
+import { INDEX_HTML_CSR, INDEX_HTML_SERVER, NormalizedApplicationBuildOptions } from './options';
 import { OutputMode } from './schema';
 
 /**
@@ -154,7 +154,15 @@ export async function executePostBundleSteps(
       // Update the index contents with the app shell under these conditions:
       // - Replace 'index.html' with the app shell only if it hasn't been prerendered yet.
       // - Always replace 'index.csr.html' with the app shell.
-      const filePath = appShellRoute && !indexHasBeenPrerendered ? indexHtmlOptions.output : path;
+      let filePath = path;
+      if (appShellRoute && !indexHasBeenPrerendered) {
+        if (outputMode !== OutputMode.Server && indexHtmlOptions.output === INDEX_HTML_CSR) {
+          filePath = 'index.html';
+        } else {
+          filePath = indexHtmlOptions.output;
+        }
+      }
+
       additionalHtmlOutputFiles.set(
         filePath,
         createOutputFile(filePath, content, BuildOutputFileType.Browser),

packages/angular/build/src/utils/server-rendering/prerender.ts

@@ -213,7 +213,7 @@ async function renderPages(
       outputFiles: outputFilesForWorker,
       assetFiles: assetFilesForWorker,
       outputMode,
-      hasSsrEntry: !!outputFilesForWorker['/server.mjs'],
+      hasSsrEntry: !!outputFilesForWorker['server.mjs'],
     } as RenderWorkerData,
     execArgv: workerExecArgv,
   });
@@ -319,7 +319,7 @@ async function getAllRoutes(
       outputFiles: outputFilesForWorker,
       assetFiles: assetFilesForWorker,
       outputMode,
-      hasSsrEntry: !!outputFilesForWorker['/server.mjs'],
+      hasSsrEntry: !!outputFilesForWorker['server.mjs'],
     } as RoutesExtractorWorkerData,
     execArgv: workerExecArgv,
   });

packages/angular/ssr/schematics/ng-add/index_spec.ts

@@ -52,7 +52,7 @@ describe('@angular/ssr ng-add schematic', () => {
   });
 
   it('works', async () => {
-    const filePath = '/projects/test-app/server.ts';
+    const filePath = '/projects/test-app/src/server.ts';
 
     expect(appTree.exists(filePath)).toBeFalse();
     const tree = await schematicRunner.runSchematic('ng-add', defaultOptions, appTree);

packages/angular_devkit/build_angular/src/builders/extract-i18n/application-extraction.ts

@@ -51,6 +51,7 @@ export async function extractMessages(
   buildOptions.budgets = undefined;
   buildOptions.index = false;
   buildOptions.serviceWorker = false;
+  buildOptions.server = undefined;
   buildOptions.ssr = false;
   buildOptions.appShell = false;
   buildOptions.prerender = false;

packages/schematics/angular/app-shell/index.ts

@@ -29,8 +29,7 @@ import {
 import { applyToUpdateRecorder } from '../utility/change';
 import { getAppModulePath, isStandaloneApp } from '../utility/ng-ast-utils';
 import { findBootstrapApplicationCall, getMainFilePath } from '../utility/standalone/util';
-import { getWorkspace, updateWorkspace } from '../utility/workspace';
-import { Builders } from '../utility/workspace-models';
+import { getWorkspace } from '../utility/workspace';
 import { Schema as AppShellOptions } from './schema';
 
 const APP_SHELL_ROUTE = 'shell';
@@ -140,77 +139,6 @@ function validateProject(mainPath: string): Rule {
   };
 }
 
-function addAppShellConfigToWorkspace(options: AppShellOptions): Rule {
-  return (host, context) => {
-    return updateWorkspace((workspace) => {
-      const project = workspace.projects.get(options.project);
-      if (!project) {
-        return;
-      }
-
-      const buildTarget = project.targets.get('build');
-      if (buildTarget?.builder === Builders.Application) {
-        // Application builder configuration.
-        const prodConfig = buildTarget.configurations?.production;
-        if (!prodConfig) {
-          throw new SchematicsException(
-            `A "production" configuration is not defined for the "build" builder.`,
-          );
-        }
-
-        prodConfig.appShell = true;
-
-        return;
-      }
-
-      // Webpack based builders configuration.
-      // Validation of targets is handled already in the main function.
-      // Duplicate keys means that we have configurations in both server and build builders.
-      const serverConfigKeys = project.targets.get('server')?.configurations ?? {};
-      const buildConfigKeys = project.targets.get('build')?.configurations ?? {};
-
-      const configurationNames = Object.keys({
-        ...serverConfigKeys,
-        ...buildConfigKeys,
-      });
-
-      const configurations: Record<string, {}> = {};
-      for (const key of configurationNames) {
-        if (!serverConfigKeys[key]) {
-          context.logger.warn(
-            `Skipped adding "${key}" configuration to "app-shell" target as it's missing from "server" target.`,
-          );
-
-          continue;
-        }
-
-        if (!buildConfigKeys[key]) {
-          context.logger.warn(
-            `Skipped adding "${key}" configuration to "app-shell" target as it's missing from "build" target.`,
-          );
-
-          continue;
-        }
-
-        configurations[key] = {
-          browserTarget: `${options.project}:build:${key}`,
-          serverTarget: `${options.project}:server:${key}`,
-        };
-      }
-
-      project.targets.add({
-        name: 'app-shell',
-        builder: Builders.AppShell,
-        defaultConfiguration: configurations['production'] ? 'production' : undefined,
-        options: {
-          route: APP_SHELL_ROUTE,
-        },
-        configurations,
-      });
-    });
-  };
-}
-
 function addRouterModule(mainPath: string): Rule {
   return (host: Tree) => {
     const modulePath = getAppModulePath(host, mainPath);
@@ -313,6 +241,7 @@ function addStandaloneServerRoute(options: AppShellOptions): Rule {
       throw new SchematicsException(`Cannot find "${configFilePath}".`);
     }
 
+    const recorder = host.beginUpdate(configFilePath);
     let configSourceFile = getSourceFile(host, configFilePath);
     if (!isImported(configSourceFile, 'ROUTES', '@angular/router')) {
       const routesChange = insertImport(
@@ -322,10 +251,8 @@ function addStandaloneServerRoute(options: AppShellOptions): Rule {
         '@angular/router',
       );
 
-      const recorder = host.beginUpdate(configFilePath);
       if (routesChange) {
         applyToUpdateRecorder(recorder, [routesChange]);
-        host.commitUpdate(recorder);
       }
     }
 
@@ -340,45 +267,20 @@ function addStandaloneServerRoute(options: AppShellOptions): Rule {
     }
 
     // Add route to providers literal.
-    const newProvidersLiteral = ts.factory.updateArrayLiteralExpression(providersLiteral, [
-      ...providersLiteral.elements,
-      ts.factory.createObjectLiteralExpression(
-        [
-          ts.factory.createPropertyAssignment('provide', ts.factory.createIdentifier('ROUTES')),
-          ts.factory.createPropertyAssignment('multi', ts.factory.createIdentifier('true')),
-          ts.factory.createPropertyAssignment(
-            'useValue',
-            ts.factory.createArrayLiteralExpression(
-              [
-                ts.factory.createObjectLiteralExpression(
-                  [
-                    ts.factory.createPropertyAssignment(
-                      'path',
-                      ts.factory.createIdentifier(`'${APP_SHELL_ROUTE}'`),
-                    ),
-                    ts.factory.createPropertyAssignment(
-                      'component',
-                      ts.factory.createIdentifier('AppShellComponent'),
-                    ),
-                  ],
-                  true,
-                ),
-              ],
-              true,
-            ),
-          ),
-        ],
-        true,
-      ),
-    ]);
-
-    const recorder = host.beginUpdate(configFilePath);
     recorder.remove(providersLiteral.getStart(), providersLiteral.getWidth());
-    const printer = ts.createPrinter();
-    recorder.insertRight(
-      providersLiteral.getStart(),
-      printer.printNode(ts.EmitHint.Unspecified, newProvidersLiteral, configSourceFile),
-    );
+    const updatedProvidersString = [
+      ...providersLiteral.elements.map((element) => '    ' + element.getText()),
+      `    {
+      provide: ROUTES,
+      multi: true,
+      useValue: [{
+        path: '${APP_SHELL_ROUTE}',
+        component: AppShellComponent
+      }]
+    }\n  `,
+    ];
+
+    recorder.insertRight(providersLiteral.getStart(), `[\n${updatedProvidersString.join(',\n')}]`);
 
     // Add AppShellComponent import
     const appShellImportChange = insertImport(
@@ -393,6 +295,52 @@ function addStandaloneServerRoute(options: AppShellOptions): Rule {
   };
 }
 
+function addServerRoutingConfig(options: AppShellOptions): Rule {
+  return async (host: Tree) => {
+    const workspace = await getWorkspace(host);
+    const project = workspace.projects.get(options.project);
+    if (!project) {
+      throw new SchematicsException(`Project name "${options.project}" doesn't not exist.`);
+    }
+
+    const configFilePath = join(project.sourceRoot ?? 'src', 'app/app.routes.server.ts');
+    if (!host.exists(configFilePath)) {
+      throw new SchematicsException(`Cannot find "${configFilePath}".`);
+    }
+
+    const sourceFile = getSourceFile(host, configFilePath);
+    const nodes = getSourceNodes(sourceFile);
+
+    // Find the serverRoutes variable declaration
+    const serverRoutesNode = nodes.find(
+      (node) =>
+        ts.isVariableDeclaration(node) &&
+        node.initializer &&
+        ts.isArrayLiteralExpression(node.initializer) &&
+        node.type &&
+        ts.isArrayTypeNode(node.type) &&
+        node.type.getText().includes('ServerRoute'),
+    ) as ts.VariableDeclaration | undefined;
+
+    if (!serverRoutesNode) {
+      throw new SchematicsException(
+        `Cannot find the "ServerRoute" configuration in "${configFilePath}".`,
+      );
+    }
+    const recorder = host.beginUpdate(configFilePath);
+    const arrayLiteral = serverRoutesNode.initializer as ts.ArrayLiteralExpression;
+    const firstElementPosition =
+      arrayLiteral.elements[0]?.getStart() ?? arrayLiteral.getStart() + 1;
+    const newRouteString = `{
+    path: '${APP_SHELL_ROUTE}',
+    renderMode: RenderMode.AppShell
+  },\n`;
+    recorder.insertLeft(firstElementPosition, newRouteString);
+
+    host.commitUpdate(recorder);
+  };
+}
+
 export default function (options: AppShellOptions): Rule {
   return async (tree) => {
     const browserEntryPoint = await getMainFilePath(tree, options.project);
@@ -401,9 +349,9 @@ export default function (options: AppShellOptions): Rule {
     return chain([
       validateProject(browserEntryPoint),
       schematic('server', options),
-      addAppShellConfigToWorkspace(options),
       isStandalone ? noop() : addRouterModule(browserEntryPoint),
       isStandalone ? addStandaloneServerRoute(options) : addServerRoutes(options),
+      addServerRoutingConfig(options),
       schematic('component', {
         name: 'app-shell',
         module: 'app.module.server.ts',