角通用（SSR）不预渲染语言

Question

我使用的NGX-翻译为多国语言的应用程序。

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模式下运行的应用程序：

• 页面加载与郎字符串（“Home.Title”）
• 有一个HTTP呼吁en.json
• 字符串都将替换为转换（“我的网站”）

我需要什么，以改变该翻译将在服务器呈现？

Answer 1

我不知道它是做的最好的方式，但我明白，我们需要在服务器端加载莫名其妙的翻译。我用快递为：

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

});

和HttpInterceptor在AppServerModule you can see here

Answer 2

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

转换服务器，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();
    });
  }

翻译浏览器，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 3

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

这值得一试！