角通用(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'); 
}

遵循角通用:服务器端渲染指令，在SSR模式下运行app：

• 页面加载了lang字符串('Home.Title')
• 有一个对en.json的HTTP调用
• 将字符串替换为翻译(“我的站点”)

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

Answer 1

我不确定这是否是最好的方法，但据我所知，我们需要在服务器端加载翻译。我用快递表示：

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

})；

和HttpInterceptor in AppServerModule 你可以在这里看到

Answer 2

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();
    });
  }

翻译-浏览器-加载器.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

我在这里找到的最好的教程是：

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

我使用角10，与角通用(SSR)和ngx翻译，它为我工作.

本教程帮助避免使用服务器不支持的本地存储，它将translateLoaderFactory用于服务器和浏览器，它使用TransferState来避免对语言json文件的不必要的http调用(因为服务器已经将它们加载到服务器返回的页面中)，最后它有一个完整的git存储库，一步一步地实现。感谢德米特里·埃芬科的出色表现。

在他重新实现之后，页面将被正确地呈现出来，并嵌入到html中，因此不会执行额外的http请求来获取语言json文件。这样就避免了页面闪烁的问题，甚至在一瞬间也必须看到页面中显示的语言键。

唯一悬而未决的问题是，如果页面加载后语言发生了更改，由于该页面没有被ngx翻译重新加载，它将保留在html中原始加载的语言中，因此会执行一个http请求来加载新语言，但我不知道如何避免这种情况。至少已经在cookie中选择了其语言的用户，或者对检测到的语言感到满意的用户，将不会为语言json执行任何http请求。如果我在服务器上找到了语言变化呈现的解决方案，我将用这个信息更新这个答案。