Angular SSR edge function is crashing

Support
, ,
1

Hi, I am trying to create a starter site that uses Angular 19 SSR. The site is “https://dailies2.netlify.app/”

I followed the instructions from What's new with Angular 19 on Netlify | Netlify Developers to create my project. The project deploys successfully and the index page loads in a browser.

However, when I try to access an api path like “https://dailies2.netlify.app/api/hello”, I get an error message about an edge function crashing. The edge function is ‘angular-ssr’ which I did not create directly and the only edge function that is built on the site.

Here is the error from the browser:


An unhandled error in the function code triggered the following message:

The deployment failed while serving the request.

Connection details

Netlify internal ID: 01JSJ6TJ1Q4B26MFHSBX3CMRK6

Here is the edge function log:

image
image1387×448 39.8 KB

Additionally, here is the server.ts file in my project:

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 { AngularAppEngine, createRequestHandler } from '@angular/ssr'
import { getContext } from '@netlify/angular-runtime/context.mjs'

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

const app = express();
const angularApp = new AngularNodeAppEngine();
const angularAppEngine = new AngularAppEngine()

export async function netlifyAppEngineHandler(request: Request): Promise<Response> {
  const context = getContext()

  // Example API endpoints can be defined here.
  // Uncomment and define endpoints as necessary.
  const pathname = new URL(request.url).pathname;
  console.log('path', pathname);
  if (pathname === '/api/hello') {
    return Response.json({ message: 'Hello from the API' });
  }

  const result = await angularAppEngine.handle(request, context)
  return result || new Response('Not found', { status: 404 })
}
/**
 * Example Express Rest API endpoints can be defined here.
 * Uncomment and define endpoints as necessary.
 *
 * Example:
 * ```ts
 * app.get('/api/**', (req, res) => {
 *   // Handle API request
 * });
 * ```
 */

/**
 * Serve static files from /browser
 */
// app.use(
//   express.static(browserDistFolder, {
//     maxAge: '1y',
//     index: false,
//     redirect: false,
//   }),
// );

// app.use('/test', (req, res) => {
//   res.send('test');
// });

// /**
//  * Handle all other requests by rendering the Angular application.
//  */
// app.use('/**', (req, res, next) => {
//   angularApp
//     .handle(req)
//     .then((response) =>
//       response ? writeResponseToNodeResponse(response, res) : next(),
//     )
//     .catch(next);
// });

// /**
//  * Start the server if this module is the main entry point.
//  * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
//  */
// if (isMainModule(import.meta.url)) {
//   const port = process.env['PORT'] || 4000;
//   app.listen(port, () => {
//     console.log(`Node Express server listening on http://localhost:${port}`);
//   });
// }

/**
 * The request handler used by the Angular CLI (dev-server and during build).
 */
//export const reqHandler = createNodeRequestHandler(app);
export const reqHandler = createRequestHandler(netlifyAppEngineHandler)

Since this is the edge function that was automatically created for Angular SSR, I don’t know where the function is “reading or writing files” as the error suggests and I can’t change the behavior to fix the error. How can I resolve this issue?

2

You’re using 3 imports that can potentially cause this. Have you tested without these?

3

Thank you. I commented out those imports and the api functions are called successfully on the site.