After struggling with a persistent error for days, I stumbled upon an article that explained how to implement a relative to absolute interceptor. If you're facing a similar issue, check out the link below:

1. I created a file named "universal-relative.interceptor.ts" in my src folder.
2. I added the interceptor code to the "universal-relative.interceptor.ts" file.

import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Inject, Injectable, Optional } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';

// case insensitive check against config and value
const startsWithAny = (arr: string[] = []) => (value = '') => {
    return arr.some(test => value.toLowerCase().startsWith(test.toLowerCase()));
};

// http, https, protocol relative
const isAbsoluteURL = startsWithAny(['http', '//']);

@Injectable()
export class UniversalRelativeInterceptor implements HttpInterceptor {
    constructor(@Optional() @Inject(REQUEST) protected request: Request) {}

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        if (this.request && !isAbsoluteURL(req.url)) {
            const protocolHost = `${this.request.protocol}://${this.request.get(
                'host'
            )}`;
            const pathSeparator = !req.url.startsWith('/') ? '/' : '';
            const url = protocolHost + pathSeparator + req.url;
            const serverRequest = req.clone({ url });
            return next.handle(serverRequest);
        } else {
            return next.handle(req);
        }
    }
}

3. In your "app.server.module.ts" file, locate and open it.
4. Add the following snippet of code into your app server module.

import { NgModule } from '@angular/core';
import {
  ServerModule,
  ServerTransferStateModule,
} from "@angular/platform-server";

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { UniversalRelativeInterceptor } from 'src/universal-relative.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  imports: [AppModule, ServerModule, ServerTransferStateModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UniversalRelativeInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

By following these steps, I was able to successfully resolve the error that had been plaguing me for days!

I encountered the dreaded ERROR NetworkError, but fear not - I discovered a workaround to eliminate this pesky error for good. This solution is particularly valuable as it addresses the exact same issue mentioned earlier. If my experience can assist others facing similar server errors, then I am delighted.

When making an API request to the server during a reload event, remember to first verify isPlatformBrowser when utilizing ng-universal. Here's an example:

import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { HttpClient, HttpHeaders } from '@angular/common/http';

export class HomeComponent implements OnInit {

  public testBrowser: boolean;
  public data: any;
  
  constructor(private http: HttpClient, @Inject(PLATFORM_ID) platformId: string) {
    this.testBrowser = isPlatformBrowser(platformId);
  }

  ngOnInit() {
    if (this.testBrowser) {
      //avoid server NETWORK error
      this.data = this.http.get('/api');
    }
  }
}

I also faced this same challenge of encountering errors while attempting server calls from the client without verifying isPlatformBrowser === true. By implementing this check within OnInit, my problem was resolved. Hopefully, this insight can help address this bug effectively.

This solution proved instrumental in overcoming a persistent bug that had been plaguing me. You can find more details here:

I encountered a similar error message. To resolve it, consider removing the TransferHttpCacheModule from your app.module and instead create a custom HTTP transfer interceptor file.

In my case, I created a file named transfer-state.interceptor.ts and then included it in the providers:[] section of my app.module to address the issue. Below are examples illustrating how I implemented this solution. While I cannot guarantee that this method will work for everyone, it did eliminate the error for me.

//app.module.ts

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";

import { AppRoutingModule } from './app-routing/app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './modules/home/home.component';
import { SliderComponent } from './components/slider/slider.component';
import { WindowRefService } from './services/window-ref.service';
import { TransferStateInterceptor } from './interceptors/transfer-state.interceptor';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    SliderComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule,
    AppRoutingModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    WindowRefService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TransferStateInterceptor,
      multi: true
    }
],
  bootstrap: [AppComponent]
})
export class AppModule { }

If the above custom transfer state file does not work for you, there may be alternative approaches available.

//transfer-state.interceptor.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { Observable, of } from 'rxjs';
import { StateKey, TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { tap } from 'rxjs/operators';

@Injectable()
export class TransferStateInterceptor implements HttpInterceptor {

  constructor(
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: any,
  ) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // For this demo application, we will only worry about State Transfer for get requests.
    if (request.method !== 'GET') {
      return next.handle(request);
    }


    // Use the request url as the key.
    const stateKey: StateKey<string> = makeStateKey<string>(request.url);

    // For any http requests made on the server, store the response in State Transfer.
    if (isPlatformServer(this.platformId)) {
      return next.handle(request).pipe(
        tap((event: HttpResponse<any>) => {
          this.transferState.set(stateKey, event.body);
        })
      );
    }

    // For any http requests made in the browser, first check State Transfer for a 
    // response corresponding to the request url.
    if (isPlatformBrowser(this.platformId)) {
      const transferStateResponse = this.transferState.get<any>(stateKey, null);
      if (transferStateResponse) {
        const response = new HttpResponse({ body: transferStateResponse, status: 200 });

        // Remove the response from state transfer, so any future requests to 
        // the same url go to the network.
        this.transferState.remove(stateKey);
        return of(response);
      } else {
        return next.handle(request);
      }
    }
  }
}

To implement custom caching, you can explore using memory-cache, although I have not personally tested this option. Additionally, the following articles provided valuable insights during my troubleshooting process:

If needed, ensure to include ServerTransferStateModule in your app.server.module file.

//app.server.module

import { NgModule } from '@angular/core';
import {
  ServerModule,
  ServerTransferStateModule
} from "@angular/platform-server";

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Best of luck with your implementation!

One issue I encountered was that my API variable was undefined due to the Angular SSR life-cycle. The data only became available after the browser module had loaded.

I had been employing a similar approach:

this.isBrowser$.subscribe(isBrowser => { ... });

in order to configure the correct api endpoint.

While investigating the original problem, I discovered that the root cause in my scenario was due to the resourceUrl variable not being an absolute path for the production environment.

environment.ts

export const environment = {
  resourceUrl: 'http://localhost:8082/api/site',
  siteId: '1111'
};

During development, I had been using an absolute URL "http://localhost:8082/api/site" for the resourceUrl environment variable, which worked fine in that mode.

environment.prod.ts

export const environment = {
  resourceUrl: '/api/site',
  siteId: '1111'
};

However, in production mode, the relative URL "/api/site" caused issues when running "serve:ssr".

return this.http.get<ISomething>(`${environment.resourceUrl}/home/${environment.siteId}`);

To resolve this issue, I updated environment.prod.ts to use an absolute URL instead of a relative one.

I am sharing this response as a reminder in case others overlook David's comment. Thank you, David.

If you happen to encounter an issue while utilizing ng-universal, and the error stems from server side rendering, a straightforward solution is to add the following code snippet:

    if (typeof window === 'object') {
      // your client side httpClient code
    }