I am having issues with SSR deployment in an Angular19 app
This is a long post so tl;dr
SSR doesn’t work without the Angular runtime and when I turn on the Angular runtime I get this error. How do I fix this error?
Error message
TypeError: failBuild is not a function
Plugin details
Package: @netlify/angular-runtime
Version: 2.2.1
Repository: git+https://github.com/netlify/angular-runtime.git
npm link: https://www.npmjs.com/package/@netlify/angular-runtime
Report issues: https://github.com/netlify/angular-runtime/issues
Error location
In "onPreBuild" event in "@netlify/angular-runtime" from Netlify app and package.json
Some facts:
- I have an Angular SSR app that works.
- I am using the Hybrid Rendering feature with only 1 path that is server rendered
- When I “remove” the “Runtime” deployment settings, it deploys! and is usable
- When it deploys without the Angular runtime, SSR does not work
- When I deploy with the Angular runtime I get the below error
- Node v20.18.1
- Angular v19.0.3
- @netlify/angular-runtime v2.2.1
- App name is
jm-angular-app
Things I have tried based on this site and other googling
-
Remove the Angular runtime. It works but SSR seems turned off
I am guessing this has something to do with theserver.tsreplacement? Or many its just hosting the static files and not running the server file at all when that runtime is off? Im not sure and I dont know how to even test that theory. -
Following the steps in the angular-19-on-netlify blog post.
I changed myserver.tsbased on the post but it didn’t seem to make any difference. Also, the server.ts file in this post has some typos and incorrect imports which makes me think it maybe just doesnt work? -
Updates to my server.ts based on the @netlify/angular-runtime docs
I tried both of theserver.tsoptions they have listed and neither of them made a difference. Also, the app doesnt seem to run locally when I use these server.ts files -
Changes in my netlifiy.toml
I’ve made a bunch of changes which dont seem to matter. For example,/browserwhich seems to be required when not using the Angular Runtime, I have read that you shouldnt have that. Redirects or no redirects, when I remove the Angular runtime, it only works if I have the redirects. I have read that when you have Angular SSR, the redirect do not do anything (which makes sense) -
No edge functions deployed
Not really sure where to put this in my long post, but when I deploy WITHOUT the Angular Runtime, it works but I notice in the " Deploy summary" it says “No edge functions deployed” this seems wrong based on what Ive seen in a SSR+Netlify video. This further pushes me towards the “I need the Angular Runtime” direction.
Help?
Here are some other files that might be helpful
netlify.toml
[build]
command = "yarn build"
functions = "netlify/functions"
publish = "dist/jobs-marketplace/browser"
[[redirects]]
from = "/*"
status = 200
to = "/index.csr.html"
server.ts
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import {
AngularNodeAppEngine,
createNodeRequestHandler,
isMainModule,
writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const app = express();
const angularApp = new AngularNodeAppEngine();
app.use(
express.static(browserDistFolder, {
index: false,
maxAge: '1y',
redirect: false,
}),
);
app.use('/**', (req, res, next) => {
angularApp
.handle(req)
.then((response) =>
response ? writeResponseToNodeResponse(response, res) : next(),
)
.catch(next);
});
if (isMainModule(import.meta.url)) {
const port = process.env.PORT || 4200;
app.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
export const reqHandler = createNodeRequestHandler(app);
Let me know if you think any other files would be helpful