编译Universal Angular时使用ngx-translate报错，附配置代码

嘿，看起来你在给Angular Universal配置ngx-translate时碰到了编译问题。结合你给出的translate-server-loader.service.ts代码片段，我整理了几个最可能的问题点和对应的修复方案：

1. 构造函数拼写错误 #

你的代码里construc...明显是没写完的拼写，这会直接触发TypeScript编译失败。正确的构造函数声明应该是这样的：

constructor(
  private http: HttpClient,
  private transferState: TransferState
) {}

先把这个基础问题修正，再看其他逻辑。

2. 混淆了服务端与浏览器环境的Loader实现 #

你当前的类名是TranslateBrowserLoader，但文件名却是translate-server-loader.service.ts，这很容易混淆环境逻辑。在Angular Universal中，服务端和浏览器需要分开实现不同的TranslateLoader：

服务端Loader（translate-server-loader.service.ts） #

服务端环境不需要TransferState，直接通过HttpClient加载翻译文件即可：

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

@Injectable()
export class TranslateServerLoader implements TranslateLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
    // 注意这里的路径要根据你项目的静态文件位置调整
    return this.http.get(`./assets/i18n/${lang}.json`);
  }
}

浏览器端Loader（translate-browser-loader.service.ts） #

浏览器端用TransferState来复用服务端已加载的翻译内容，避免重复请求：

import { Observable, of, tap } from 'rxjs';
import { TranslateLoader } from '@ngx-translate/core';
import { Injectable } from '@angular/core';
import { makeStateKey, StateKey, TransferState } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class TranslateBrowserLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    private transferState: TransferState
  ) {}

  getTranslation(lang: string): Observable<any> {
    const translationKey: StateKey<any> = makeStateKey<any>(`translate-${lang}`);
    const cachedTranslation = this.transferState.get(translationKey, null);

    // 如果服务端已经把翻译数据存在TransferState里，直接返回缓存
    if (cachedTranslation) {
      return of(cachedTranslation);
    }

    // 否则从服务器加载，并存入TransferState
    return this.http.get(`./assets/i18n/${lang}.json`).pipe(
      tap((translation) => {
        this.transferState.set(translationKey, translation);
      })
    );
  }
}

3. 在对应模块中分别配置Loader #

接下来要在浏览器端的AppModule和服务端的AppServerModule里分别注册对应的Loader：

浏览器端（app.module.ts） #

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateBrowserLoader } from './translate-browser-loader.service';
import { HttpClient } from '@angular/common/http';
import { TransferState } from '@angular/platform-browser';

export function createBrowserTranslateLoader(http: HttpClient, transferState: TransferState) {
  return new TranslateBrowserLoader(http, transferState);
}

@NgModule({
  imports: [
    // ...其他模块
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createBrowserTranslateLoader,
        deps: [HttpClient, TransferState]
      }
    })
  ]
})
export class AppModule {}

服务端（app.server.module.ts） #

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateServerLoader } from './translate-server-loader.service';
import { HttpClient } from '@angular/common/http';

export function createServerTranslateLoader(http: HttpClient) {
  return new TranslateServerLoader(http);
}

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    // ...其他服务端模块
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createServerTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

如果修正这些后还是有编译错误，建议把完整的错误信息贴出来，这样能更精准定位问题。

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