diff --git a/apps/web/server.ts b/apps/web/server.ts index a42c998..c0dc7b2 100644 --- a/apps/web/server.ts +++ b/apps/web/server.ts @@ -1,46 +1,39 @@ -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); }); @@ -48,12 +41,11 @@ export function app (): express.Express { } -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); diff --git a/apps/web/src/app/app.config.server.ts b/apps/web/src/app/app.config.server.ts index 1348a87..d0fc4bf 100644 --- a/apps/web/src/app/app.config.server.ts +++ b/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); diff --git a/apps/web/src/app/app.routes.server.ts b/apps/web/src/app/app.routes.server.ts new file mode 100644 index 0000000..e2babe5 --- /dev/null +++ b/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, + }, +]; diff --git a/package.json b/package.json index 37ad416..e7ce9b2 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc01fbf..6b45378 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -89,9 +89,6 @@ importers: tslib: specifier: 2.8.1 version: 2.8.1 - zone.js: - specifier: 0.16.1 - version: 0.16.1 devDependencies: '@analogjs/vite-plugin-angular': specifier: 2.4.0 @@ -19882,4 +19879,5 @@ snapshots: zod@4.3.6: {} - zone.js@0.16.1: {} + zone.js@0.16.1: + optional: true