Angular 通用抛出“XMLHttpRequest.send 错误”答案

【问题标题】：Angular universal throwing "Error at XMLHttpRequest.send"Angular 通用抛出“XMLHttpRequest.send 错误”
【发布时间】：2020-10-22 04:02:38
【问题描述】：

我最近将项目升级到 Angular 10 并添加了 Angular Universal。构建应用程序没有问题，但是当我在开发环境中运行我的应用程序时，它会抛出以下错误

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

我正在使用以下命令来运行应用程序

npm run dev:ssr

我也检查了守卫中的 isPlatformBrowser，但仍然没有运气。

任何帮助将不胜感激。

【问题讨论】：

标签： angular typescript angular-universal angular10

【解决方案1】：

这可能对将来的任何人都有帮助。制作拦截器来处理 HTTP 调用解决了这个问题。就我而言，所有外部 API 调用都使用绝对 URL。拦截器帮助我检查 URL 是相对的还是绝对的，并在必要时更新 URL。

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);
  }
}

【讨论】：

这是否包含在您的 add.module 提供程序或您的 app.server.module 提供程序中？