@angular/ssr/node not working as intended

[davidbusuttil]

I am using @angular/[email protected], and I have the following:

src/server.ts

import {
AngularNodeAppEngine,
createNodeRequestHandler,
isMainModule,
writeResponseToNodeResponse,
} from "@angular/ssr/node";

import express from "express";

import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";

const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, "../browser");

const server = express();
const angularNodeAppEngine = new AngularNodeAppEngine();

server.use(
express.static(browserDistFolder, {
maxAge: "1y",
index: false,
redirect: false,
}),
);

server.use("/**", (serverRequest, serverResponse, serverNextFunction) => {
angularNodeAppEngine
.handle(serverRequest)
.then((response) => {
if (response) {
return writeResponseToNodeResponse(response, serverResponse);
} else {
return serverNextFunction();
}
})
.catch(serverNextFunction);
});

if (isMainModule(import.meta.url)) {
const port = process.env["PORT"] || 4000;
server.listen(port, () => {
console.log(Node Express server listening on http://localhost:${port});
});
}

export const reqHandler = createNodeRequestHandler(server);

src/app/app.routes.ts

import { Route } from "@angular/router";

import { ErrorComponent } from "./error/error.component";
import { errorResolver } from "./error/error.resolver";
import { HomeComponent } from "./home/home.component";
import { homeResolver } from "./home/home.resolver";

export const routes: Route[] = [
{
path: "error",
component: ErrorComponent,
resolve: {
error: errorResolver,
},
},
{
path: "",
pathMatch: "full",
component: HomeComponent,
resolve: {
home: homeResolver,
},
},
{
path: "**",
redirectTo: "/error",
},
];

src/app/app.routes.server.ts

import { RenderMode, ServerRoute } from "@angular/ssr";

export const serverRoutes: ServerRoute[] = [
{
path: "**",
renderMode: RenderMode.Server,
},
];

src/app/app.config.ts

import {
ApplicationConfig,
provideExperimentalZonelessChangeDetection,
} from "@angular/core";
import { initializeApp, provideFirebaseApp } from "@angular/fire/app";
import { getAnalytics, provideAnalytics } from "@angular/fire/analytics";
import { getFirestore, provideFirestore } from "@angular/fire/firestore";
import { getStorage, provideStorage } from "@angular/fire/storage";
import {
provideClientHydration,
withEventReplay,
} from "@angular/platform-browser";
import {
provideRouter,
withEnabledBlockingInitialNavigation,
withInMemoryScrolling,
} from "@angular/router";

import { routes } from "./app.routes";

import { environment } from "../environments/environment.production";

export const appConfig: ApplicationConfig = {
providers: [
provideExperimentalZonelessChangeDetection(),
provideClientHydration(withEventReplay()),
provideRouter(
routes,
withEnabledBlockingInitialNavigation(),
withInMemoryScrolling({
anchorScrolling: "enabled",
scrollPositionRestoration: "enabled",
}),
),
provideFirebaseApp(() => {
return initializeApp(environment.firebase);
}),
provideAnalytics(() => {
return getAnalytics();
}),
provideFirestore(() => {
return getFirestore();
}),
provideStorage(() => {
return getStorage();
}),
],
};

src/app/app.config.server.ts

import { mergeApplicationConfig, ApplicationConfig } from "@angular/core";
import { provideServerRendering } from "@angular/platform-server";
import { provideServerRoutesConfig } from "@angular/ssr";

import { appConfig } from "./app.config";
import { serverRoutes } from "./app.routes.server";

const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering(),
provideServerRoutesConfig(serverRoutes),
],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

Now, I am not using ng deploy or firebase deploy since they require @angular-devkit/build-angular and the SSR function being deployed is not working. Instead, I created a separate Firebase Repo and initialised both hosting and functions.

firebase.json

{
"functions": [
{
"source": "functions/ssr",
"codebase": "ssr",
"ignore": [...]
}
],
"hosting": {
"public": "hosting",
"ignore": [...],
"rewrites": [
{
"source": "**",
"function": {
"functionId": "ssr",
"region": "europe-west1"
}
}
]
}
}

functions/ssr/index.js

import { onRequest } from "firebase-functions/v2/https";

import { reqHandler } from "./build/template/server/server.mjs";

export const ssr = onRequest(
{
region: "europe-west1",
invoker: "public",
memory: "256MiB",
cpu: 1,
timeoutSeconds: 60,
concurrency: 80,
minInstances: 1,
maxInstances: 100,
ingressSettings: "ALLOW_ALL",
preserveExternalChanges: false,
},
reqHandler,
);

In the Firebase Repo, I am successfully deploying both hosting and functions using firebase deploy. The SSR function works, save for paths redirected to the ErrorComponent:

src/app/app.routes.ts

{
path: "**",
redirectTo: "/error",
},

When seeing the Google Cloud Console logs for the Cloud function, the express instance is giving a 302 response (which is what you'd expect from a redirect), however, instead of staying on port 80, the redirect URL is given on port 8080, which is the internal port being using by the express instance. I reckon that server.ts needs to be modified, however, I don't know how.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[brunostuani]

I'm having the same issue