Question

我正在将ngx-translate用于多语言应用程序。

app.module.ts

import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';

export function HttpLoaderFactory(httpClient: HttpClient) {
   return new TranslateHttpLoader(httpClient, './assets/i18n');
}

@NgModule({
[
 TranslateModule.forRoot({
   loader: {
     provide: TranslateLoader,
     useFactory: HttpLoaderFactory,
     deps: [HttpClient]
   }
...
]
export class AppModule {
    constructor(translate: TranslateService) {

      translate.setDefaultLang('en');

      translate.use( 'en'); 
}

按照Angular Universal: server-side rendering的说明进行操作，并以SSR模式运行应用程序：

该页面加载了lang字符串（'Home.Title'）
有一个对en.json的HTTP调用
将字符串替换为译文（“我的网站”）

为了在服务器中呈现翻译内容，我需要更改什么？

Answer 1

为此我找到的最好的教程是：

implementing-multi-language-angular-applications-rendered-on-server

我使用带有Angular Universal（SSR）和ngx-translate的Angular 10，并且对我有用。

本教程有助于避免使用服务器不支持的localstorage，它将服务器和浏览器的情况分别翻译到了TranslateLoaderFactory，并使用TransferState避免了对语言json文件的不必要的http调用（因为服务器已经加载了它们，因此它们被嵌入在服务器返回的页面中），最后它具有完整的git-hub存储库，可逐步执行。感谢Dmitry Efimenko的出色工作。

在他推荐页面后实施该代码，然后正确地呈现带有嵌入html中的代码，因此无需执行任何其他http请求来获取语言json文件。这样可以避免页面闪烁和瞬间就不必看页面上显示的语言键的问题。

唯一的未决问题是，如果在加载页面后更改了语言，则由于ngx-translate不会重新加载页面，因此该语言将保留原始载入html的语言，因此将执行http请求加载新语言，但我看不出如何避免这种情况。至少已经在cookie中选择了其语言或对检测到的语言感到满意的用户将不会对languge json进行任何http请求。如果我在服务器上找到用于语言更改呈现的解决方案，则将使用此信息更新此答案。

Answer 2

我不确定这是最好的方法，但是据我了解，我们需要以某种方式在服务器端加载翻译。我为此使用了快递：

app.get('/path/to/your/translations/*.json',(req, res) => {
 res.download( `/path/to/your/translations/${lang}`)

}）;

AppServerModule中的

和HttpInterceptor you can see here

Answer 3

https://github.com/Angular-RU/angular-universal-starter与翻译。服务器和浏览器部分使用不同的模块加载器

translates-server-loader.service.ts

 public getTranslation(lang: string): Observable<any> {
    return Observable.create((observer) => {
      const jsonData: any = JSON.parse(
        fs.readFileSync(`${this.prefix}/${lang}${this.suffix}`, 'utf8'),
      );
      const key: StateKey<number> = makeStateKey<number>(`transfer-translate-${lang}`);
      this.transferState.set(key, jsonData);
      observer.next(jsonData);
      observer.complete();
    });
  }

translates-browser-loader.service.ts-重要用途transferState

public getTranslation(lang: string): Observable<any> {
    const key: StateKey<number> = makeStateKey<number>(`transfer-translate-${lang}`);
    const data: any = this.transferState.get(key, null);
    if (data) {
      return Observable.create((observer) => {
        observer.next(data);
        observer.complete();
      });
    } else {
      return new TranslateHttpLoader(this.http, this.prefix, this.suffix).getTranslation(lang);
    }
  }

Answer 4

您需要在服务器上添加一个HTTP拦截器，这将更改翻译文件的路径，以便能够将它们加载到服务器上。这是我个人的问题，我按照本文的说明进行了修复：https://itnext.io/angular-universal-how-to-add-multi-language-support-68d83f6dfc4d

值得一看！

Angular Universal（SSR）不会预渲染语言

4 个答案: