Angular 17构建项目遇ERROR X：连接.NET API被拒绝

问题情况 #

• 项目内原有一个服务构建完全正常，复制该服务并修改其对接.NET API的方法后，执行ng build时出现报错
• 新建同类服务也会触发相同错误，仅完全删除第二个服务才不会显示报错
• 报错核心为无法连接https://localhost:7131/LinkWebTube/GetLinktubes，提示连接被拒绝（ECONNREFUSED）

相关代码 #

服务构造函数 #

constructor(
    private http: HttpClient, 
    public router: Router
    ) 
    {
    this.apiURL = environment.apiUrl;
  }

API对接方法 #

getRecords(): Observable<any[]> {
     return this.http.get<any[]>(this.apiURL + 'LinkWebTube/GetLinktubes')
  } 

完整报错信息 #

PS C:\Users\admin\source\repos\playground\Playground\ClientApp\src> ng build
⠇ Building...
ERROR X {
  headers: n {
    normalizedNames: Map(0) {},
    lazyUpdate: null,
    headers: Map(0) {}
  },
  status: 0,
  statusText: 'Unknown Error',
  url: 'https://localhost:7131/LinkWebTube/GetLinktubes',
  ok: false,
  name: 'HttpErrorResponse',
  message: 'Http failure response for https://localhost:7131/LinkWebTube/GetLinktubes: 0 undefined',
  error: TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11457:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    cause: Error: connect ECONNREFUSED ::1:7131
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
      errno: -4078,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '::1',
      port: 7131
    }
  }

解决方法 #

1. 排查构建阶段的HTTP请求触发 #

Angular构建是静态编译过程，正常情况下不会执行HTTP请求，问题大概率是第二个服务在构建时被触发了请求：

• 检查服务的构造函数、是否实现了OnInit并在ngOnInit里调用了getRecords()
• 查看模块的providers配置，是否在注册服务时用useFactory直接调用了服务的API方法（比如用服务数据初始化token）

2. 确认.NET API服务状态 #

• 启动你的.NET后端项目，确保它在https://localhost:7131正常运行，直接用浏览器访问https://localhost:7131/LinkWebTube/GetLinktubes，验证是否能返回数据
• 核对environment.ts里的apiUrl配置，确认端口和路径和后端一致

3. 避免服务初始化时自动发请求 #

• 将getRecords()的调用逻辑移到组件的ngOnInit或者用户触发的事件中，不要让服务自己在初始化时执行请求
• 如果必须预加载数据，用APP_INITIALIZER时一定要加错误捕获，避免构建失败：

  import { APP_INITIALIZER } from '@angular/core';
  import { of } from 'rxjs';
  import { catchError } from 'rxjs/operators';
  
  // 模块providers配置示例
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (myService: MyService) => () => myService.getRecords().pipe(catchError(() => of(null))).toPromise(),
      deps: [MyService],
      multi: true
    }
  ]
  

4. 区分构建环境和浏览器环境 #

在服务中添加判断，只在浏览器环境发送请求，构建时返回空数据：

import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';
import { of } from 'rxjs';

constructor(
    private http: HttpClient, 
    public router: Router,
    @Inject(PLATFORM_ID) private platformId: Object
    ) 
    {
    this.apiURL = environment.apiUrl;
  }

getRecords(): Observable<any[]> {
    if (isPlatformBrowser(this.platformId)) {
      return this.http.get<any[]>(this.apiURL + 'LinkWebTube/GetLinktubes')
    } else {
      return of([]); // 构建阶段返回空数组，避免报错
    }
  } 

内容的提问来源于stack exchange，提问作者D052057