Angular universal triggers an "Error at XMLHttpRequest.send" issue

Question

Angular universal triggers an "Error at XMLHttpRequest.send" issue

After updating my project to Angular 10 and incorporating angular universal, I encountered a strange error. While the application builds without any issues, I face an error when trying to run it on my development environment:

ERROR Error at XMLHttpRequest.send (/Users/user/Documents/Web Projects/Freelance/my-project/dist/frontend/server/main.js:297667:19)

The command I am using to run the application is:

npm run dev:ssr

I have double-checked the use of isPlatformBrowser in guards, but unfortunately, I haven't been able to resolve the issue yet. Any assistance would be greatly appreciated.

angular typescript angular-universal angular10

Answer 1

Answer №1

In the future, this solution could benefit others facing a similar issue. By creating an interceptor to manage HTTP requests, I was able to resolve the problem at hand. In my scenario, all calls to external APIs used absolute URLs. The interceptor allowed me to verify whether the URL was relative or absolute, and modify it if necessary.

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

@Injectable()
export class UniversalInterceptor implements HttpInterceptor {

  constructor(@Optional() @Inject(REQUEST) protected request: Request) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    let serverReq: HttpRequest<any> = req;
    if (this.request && req.url.indexOf('http') !== 0) {
      let newUrl = `${this.request.protocol}://${this.request.get('host')}`;
      if (!req.url.startsWith('/')) {
        newUrl += '/';
      }
      newUrl += req.url;
      serverReq = req.clone({url: newUrl});
    }

    return next.handle(serverReq);
  }
}

Answer 2

In the future, this solution could benefit others facing a similar issue. By creating an interceptor to manage HTTP requests, I was able to resolve the problem at hand. In my scenario, all calls to external APIs used absolute URLs. The interceptor allowed me to verify whether the URL was relative or absolute, and modify it if necessary.

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

@Injectable()
export class UniversalInterceptor implements HttpInterceptor {

  constructor(@Optional() @Inject(REQUEST) protected request: Request) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    let serverReq: HttpRequest<any> = req;
    if (this.request && req.url.indexOf('http') !== 0) {
      let newUrl = `${this.request.protocol}://${this.request.get('host')}`;
      if (!req.url.startsWith('/')) {
        newUrl += '/';
      }
      newUrl += req.url;
      serverReq = req.clone({url: newUrl});
    }

    return next.handle(serverReq);
  }
}

Angular universal triggers an "Error at XMLHttpRequest.send" issue

Answer №1

Similar questions

How to trigger a function in a separate component (Comp2) from the HTML of Comp1 using Angular 2

Having trouble with Typescript module path resolution for .js files?

AngularJS UI-Router in hybrid mode fails to recognize routes upon initial page load or reload

Deploying a nodejs application with angular as the user interface framework using Firebase

What causes the module declaration in the .d.ts file to fail in an Angular application?

Using an Object as a parameter in a Typescript function

Error with Cloudinary and the <cl-image> component in Angular 5 CLI

The plugin "proposal-numeric-separator" was not found. Please make sure that there is a corresponding entry for it in the ./available-plugins.js file

Guide for sorting Material Table does not work as expected

The element is implicitly classified as an 'any' type due to the index expression not being of type 'number'

Prevent click events on disabled tabs in PrimeNG tabMenu

Discover the data type of the subfield within an interface or type in Typescript

Create a series of buttons in Angular 2 that are linked to components with a click event

Considering the move from AngularJS 1.4 to Angular 8 is a significant one, the question arises: should one opt to migrate to 1.5 before upgrading

Encountered an ERROR when attempting to deploy a next.js app to Azure Static Webapp using GitHub actions for

The Fuel-ui module in Angular 2 fails to function properly when loaded from a different directory

Mastering the Art of Flex Layout Grids

Can you explain the significance of using an exclamation mark after defining a variable in TypeScript?

Divide a list Observable into two parts

Customizing Angular Forms: Set formcontrol value to a different value when selecting from autocomplete suggestions