Remove zone and add server routes

apps/web/server.ts

@@ -1,59 +1,51 @@
-import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr/node';
+import {
+    AngularNodeAppEngine,
+    createNodeRequestHandler,
+    isMainModule,
+    writeResponseToNodeResponse,
+} from '@angular/ssr/node';
 import express from 'express';
+import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { dirname, join, resolve } from 'node:path';
-import bootstrap from './src/main.server';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app (): express.Express {
 
     const server = express();
-    const serverDistFolder = dirname(fileURLToPath(import.meta.url));
-    const browserDistFolder = resolve(serverDistFolder, '../browser');
-    const indexHtml = join(serverDistFolder, 'index.server.html');
-
-    const commonEngine = new CommonEngine();
-
-    server.set('view engine', 'html');
-    server.set('views', browserDistFolder);
+    const angularApp = new AngularNodeAppEngine();
 
     // Serve static files from /browser
     server.get(
         '**',
         express.static(browserDistFolder, {
             maxAge: '1y',
-            index: 'index.html',
+            index: false,
+            redirect: false,
         }),
     );
 
     // All regular routes use the Angular engine
     server.get('**', (req, res, next) => {
 
-        const { protocol, originalUrl, baseUrl, headers } = req;
-
-        commonEngine.render({
-            bootstrap,
-            documentFilePath: indexHtml,
-            url: `${protocol}://${headers.host}${originalUrl}`,
-            publicPath: browserDistFolder,
-            providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
-        })
-        .then((html) => res.send(html))
-        .catch((err) => next(err));
+        angularApp
+        .handle(req)
+        .then((response) => response ? writeResponseToNodeResponse(response, res) : next())
+        .catch(next);
 
     });
 
     return server;
 
 }
 
-function run (): void {
+const server = app();
 
-    const port = process.env['PORT'] || 4000;
+if (isMainModule(import.meta.url)) {
 
-    // Start up the Node server
-    const server = app();
+    const port = process.env['PORT'] || 4000;
     server.listen(port, () => {
 
         console.log(`Node Express server listening on http://localhost:${port}`);
@@ -62,4 +54,4 @@ function run (): void {
 
 }
 
-run();
+export const reqHandler = createNodeRequestHandler(server);

apps/web/src/app/app.config.server.ts

@@ -1,9 +1,10 @@
-import { provideServerRendering } from '@angular/ssr';
-import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
 import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
-    providers: [provideServerRendering()],
+    providers: [provideServerRendering(withRoutes(serverRoutes))],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

apps/web/src/app/app.routes.server.ts

@@ -0,0 +1,9 @@
+import type { ServerRoute } from '@angular/ssr';
+import { RenderMode } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+    {
+        path: '**',
+        renderMode: RenderMode.Server,
+    },
+];

package.json

@@ -53,8 +53,7 @@
     "express": "4.18.3",
     "reflect-metadata": "0.1.14",
     "rxjs": "7.8.2",
-    "tslib": "2.8.1",
-    "zone.js": "0.16.1"
+    "tslib": "2.8.1"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "2.4.0",