11

The problem: [NetworkError] in Angular SSR console with no additional information.

image of console output

Note: it does not seem to break the code

Environment information: Angular 8.1 SSR is served with NGINX, running in docker container. Http calls are made to the other docker container. 13 of which are XHR calls.

I have not found any information about the problem like this, and I have not troubleshoot it thoroughly myself either yet. I'll answer it if I'll finally troubleshoot it, though maybe someone done that already?

Rokas Rudgalvis
  • 306
  • 2
  • 11

2 Answers2

4

Here are the tips that might help locate you the source of the problem.

1. Debug

In your app folder run: ng run <your_project_name>:serve-ssr. It gives you benefits:

  • Renders the Universal app and triggers the NetworkError.
  • Auto-refreshes on file change, renders reasonable fast - this will allow you to go step-by-step fast and pinpoint the problem.

Compare this to npm run build:ssr && npm run serve:ssr which will take much longer to render the changes.

2. Absolute URLs

Follow Angular Server-Side rendering tutorial and make sure you have set absolute URLs.

0leg
  • 13,464
  • 16
  • 70
  • 94
  • The URLs are indeed absolute, however, I will try to look into it as you have described in 1st point – Rokas Rudgalvis Mar 06 '20 at 11:57
  • Omg, you just saved my day! Indeed I had an url that looked like "//urlhere", without the protocol. Once updated and added the protocol, error was gone. Thank you! – Nicolae Olariu Oct 07 '20 at 13:12
0

I also ran into this while working on a new centralized dev environment for my team. I was already using absolute URL's, and in my current configuration, using a domain name would not work due to DNS/load balancer not being pointed to the new server.

I have an angular application running on a node container and a PHP container serving my backend. Tying all of this together, I have an nginx container (with no exposed ports) hooked up to traefik - where basically everything requesting /api is routed to my PHP container. All SSR requests need to be set to my proxy, while client side requests to the API need to use the absolute url.

I was able to solve this by creating an HTTP interceptor to rewrite requests to communicate to my nginx container (named proxy) in the docker compose project.

@Injectable()
export class ServerDockerInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const apiReq = req.clone({ url: `http://proxy${req.url}` });
        return next.handle(apiReq);
    }
}

This interceptor was added to my AppServerModule.

Tom Ford
  • 176
  • 10