Netlify _redirects to API server not working on Angular SSR website

Support
, ,
1

Hi! I need a help with my Angular website deployed to Netlify.
I’m trying to figure out how to use _redirects file to redirect HTTP calls from ‘/api/’ to separate API server 'https://spark-rpg.onrender.com/api/’.

App name: graphite-ui.netlify.app.

The problem is, that the _redirects feature don’t work at all.
Instead of JSON response I receive contents of index.html from my Netlify app, when I try to call ‘/api/**’ via Angular’s http client.

The example of request:
this._http.get('/api/user').subscribe(console.log);

The response:

image
image766×729 34.5 KB

image
image789×651 43.3 KB

According to deploy information, _redirects file is successfully deployed:

image
image1486×707 48.2 KB

The _redirects file content is:

/api/*  https://spark-rpg.onrender.com/api/:splat  200
/* /index.html  200

So, the configuration seems to be correct, but redirects don’t work.

2

Angular is running in Edge Functions mode:

image
image746×507 12.8 KB

Edge Functions don’t allow redirects to be evaluated unless you configure the excluded path. You can directly connect to the API from your server-side code.

4

Thank you for your response.
I managed to make it working on server side by accessing the API from server directly, the same works for client side.

But, could you please clarify, if it’s possible to use edge functions as a reverse proxy in this case, instead of making direct requests to the API? Or maybe there is a way to use both edge functions and redirects?

5

Hello again,
Still can’t make edge functions work, it looks like the default “Angular SSR” function somehow blocks my custom edge functions.

I used an example from edge functions documentation, but it doesn’t redirect to the URL provided in the edge function.

Here is my edge function code:

import type { Config } from '@netlify/edge-functions';

export default async () => {
  const joke = await fetch('https://icanhazdadjoke.com/', {
    'headers': {
      'Accept': 'application/json'
    }
  });
  const jsonData = await joke.json();

  return Response.json(jsonData);
};

export const config: Config = {
  path: '/fetch-joke',
};

Could you please provide me with an example of how to configure my project to use custom edge functions along with the default one?

Thank you!

6

This is expected. Custom Edge Functions are run after framework-generated Edge Functions as documented. You’d have to somehow exclude the Angular SSR Edge Function from running on the other path, or manage everything within Angular SSR itself.