Creating a Server with Angular SSR not working

Question

Here is a link to the repo which has the issue.

https://github.com/shadow1349/test-ng-ssr

Basically, I'm trying to use the api/** route to make some API calls.

https://github.com/shadow1349/test-ng-ssr/blob/main/server.ts

However, when I make a service to do the API call it just runs in a loop with this error

ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: 'expressapi/content'
    at Recognizer.noMatchError (eval at instantiateModule (file:///Users/sam/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:2664:12)
    at eval (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:2690:20)
    at eval (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:1659:33)
    at OperatorSubscriber._error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:752:9)
    at OperatorSubscriber.error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:488:12)
    at OperatorSubscriber._error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:511:24)
    at OperatorSubscriber.error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:488:12)
    at OperatorSubscriber._error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:511:24)
    at OperatorSubscriber.error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:488:12)
    at OperatorSubscriber._error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:511:24) {
  code: 4002
}

If you run the app from the github repo you'll see the problem and it'll run in a loop for some reason.

I'm not sure where this is going wrong, any help would be appreciated.

Answer 1

When you specified this.http.get('/api/content') it was making an API call to the angular server localhost:3000, but we cannot make a backend API call to the front end server, so we are getting this infinite loop of errors, to solve this, we can run a different server to serve the APIs and then set the URL on the this.baseUrl property (Eg: https://localhost:3000 ) this will not hit the front end server and your app will run fine!

---

Additional points are that you need a separate node.js project, currently you have a server.ts which is not good for running node.js, we need server.js! so create a separate backend project, to make both FE and BE servers separately scalable!

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ContentService {
  baseUrl='https://localhost:3000';
  constructor(private http: HttpClient) {}

  getContet() {
    return this.http.get(this.baseUrl+'/api/content');
  }
}

Stackblitz Demo