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

Using Angular 4 with Semantic-UI for Dropdown menus

Tips for creating an API URL request with two search terms using Angular and TypeScript

TypeScript overloading error: Anticipated 0 parameters, received 2 instead

Angular 2 Dropdown Multiselect Plugin - Fully Customize Width to 100%

What is the best method for sending ngForm to a child component?

Is it possible to continuously activate an Angular Input setter using a Subject?

Tips for getting Angular Ivy and Angular Universal up and running together

Utilizing TypeScript Generics to Dynamically Set Tag Names in React

Obtain precise measurements of a modified image using the Sharp library

Using a comma as a decimal separator for input is not permitted when working with angular/typescript/html

Assign a value to a locally scoped variable within an iteration in Angular 2

An error occurred due to an unexpected token found in the JsonForms custom-renderer props

Creating a Component with a flexible template: (Using transclusion and an inline template)

Exploring the power of TypeScript within the useContext hook

Angular 11 Working with template-driven model within a directive

Accessing a variable within a function in Angular

Exclude weekends from DateTime

Tips for retrieving the text from a POST request in C#

Executing Promises in a loop: TypeScript & Angular with IndexedDB

What is the best way to include a button at the bottom of a Material UI table?