Angular使用localize-router远程加载JSON翻译遇fs.readFileSync报错

这个问题其实很典型——fs是Node.js专属的文件系统模块，浏览器环境里根本不存在这个API，你在浏览器端代码里直接调用fs.readFileSync，自然会触发这个错误。要实现远程加载翻译文件，得改用Angular原生的HttpClient来发起HTTP请求，下面是具体的解决方案：

步骤1：重写TranslateUniversalLoader实现 #

把依赖Node.js的文件读取逻辑替换成HTTP请求，代码示例如下：

import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class TranslateUniversalLoader implements TranslateLoader {
  // 注入HttpClient用于发起请求
  constructor(private http: HttpClient) {}

  /**
   * 从远程服务器/本地资源目录获取翻译内容
   * @param lang 目标语言标识
   * @returns {Observable<any>}
   */
  public getTranslation(lang: string): Observable<any> {
    // 场景1：翻译文件放在本地assets/i18n目录（比如en.json、zh-CN.json）
    return this.http.get(`/assets/i18n/${lang}.json`);
    
    // 场景2：从远程API获取，替换成你的接口地址即可
    // return this.http.get(`https://your-api-domain.com/i18n/${lang}.json`);
  }
}

步骤2：确保依赖配置正确 #

1. 在根模块（比如AppModule）中导入HttpClientModule，并配置TranslateModule：

import { HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateUniversalLoader } from './path-to-your-loader-file';

@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: TranslateUniversalLoader
      }
    })
  ]
})
export class AppModule {}

2. 如果用本地assets目录存放翻译文件，确认angular.json的assets配置包含目标目录（默认已配置，但建议检查）：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets" // 确保这个条目存在
            ]
          }
        }
      }
    }
  }
}

额外：兼容Angular Universal（服务端渲染）场景 #

如果你用了服务端渲染，服务端可以继续用fs读取本地文件，但浏览器端仍需用HttpClient，可以通过平台判断实现兼容：

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import * as fs from 'fs';
import { join } from 'path';
import { Observable, of } from 'rxjs';

// ...
constructor(
  private http: HttpClient,
  @Inject(PLATFORM_ID) private platformId: Object
) {}

public getTranslation(lang: string): Observable<any> {
  if (isPlatformServer(this.platformId)) {
    // 服务端用fs读取本地编译后的文件
    const filePath = join(process.cwd(), 'dist/your-project/browser/assets/i18n', `${lang}.json`);
    const translationData = JSON.parse(fs.readFileSync(filePath, 'utf8'));
    return of(translationData);
  } else {
    // 浏览器端用HTTP请求
    return this.http.get(`/assets/i18n/${lang}.json`);
  }
}

内容的提问来源于stack exchange，提问作者Jason van der Zeeuw