Angular NGXTranslate如何不得到404

发布于04月15日

我使用ngx-translate在我的Angular应用程序，即使你的翻译工作，我只有3种语言的翻译(en-CA, pt-BR, en-US). 这就是我如何设置语言的:

const defaultLanguage = translate.getBrowserCultureLang();
translate.setDefaultLang(defaultLanguage);

问题是，浏览器的区域性语言设置为"fr-CA"例如，我得到404 error，表示找不到fr-CA.json文件.这是正确的，因为该文件不存在.有没有办法不要那个404？或者我必须每single language and culture个就有一个文件？

推荐答案

我认为你必须实现一个定制TranslateLoader，就像这GitHub issue中提到的那样.

这LazyTranslateLoader将发送获取当前语言的JSON文件的请求.如果返回的响应不成功，它将获取默认语言的JSON文件.

import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

export const DEFAULT_LANG = 'en-US';
export class LazyTranslateLoader implements TranslateLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
    return this.http
      .get(`/assets/i18n/${lang}.json`)
      .pipe(
        catchError(() => this.http.get(`/assets/i18n/${DEFAULT_LANG}.json`))
      );
  }
}

接下来，在配置中为根模块中的TranslateModule提供LazyTranslateLoader.

@NgModule({
  // ...,
  imports: [
    // ...,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: LazyTranslateLoader,
        deps: [HttpClient],
      },
    }),
  ]
})
export class AppModule {}

Demo @ StackBlitz个

Reference个

Write & use your own loader个