如何配置 Angular 应用程序以支持多语言

Question

我在 Internet 上进行了研究，我的代码按预期工作，但出现控制台错误。这是我的代码：

src/assets/i18n/en-us.json

{
    "home": {
        "helloWorld": "Hello Wrold! I'm back",
        "greet": "I'm fine. Thank you. How are you?"
}

app.module.ts

HttpClientModule,
TranslateModule.forRoot( {
  loader: {
    provide: TranslateLoader, useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, './assets/i18n/','.json')},
          deps: [HttpClient]
    }
  }
)

逻辑

supportLanguages =['en-us', 'en-uk', 'en-in', 'en-aus'];

constructor(private translateService: TranslateService) { 
  this.translateService.addLangs(this.supportLanguages);
  this.translateService.setDefaultLang('en-us');

  const browserLang = this.translateService.getBrowserLang();
  this.translateService.use(browserLang);
}

模板

<span class="first">{{'home.helloWorld' | translate}}</span>
<span class="first">{{'home.greet' | translate}}</span>

代码运行正常，但为什么会出现此控制台错误。我想这也会使我的单元测试失败。

GEThttp://localhost:4200/assets/i18n/en.json [HTTP/1.1 404 Not Found 2ms]

ERROR Object { headers: {…}, status: 404, statusText: "Not Found", url: "http://localhost:4200/assets/i18n/en.json", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:4200/assets/i18n/en.json: 404 Not Found", error: "\n<html lang="en">\n\n<meta charset="utf-8">\nError\n\n\n
Cannot GET /assets/i18n/en.json
\n\n\n" }

我的浏览器语言也是 en-us:

请指出我的错误

Answer 1

只需在您的 app.component.ts..

中使用此代码

this.translateService.use(navigator.language);

问题是您将不同的语言文件传递给 .use() 方法，该方法目前不在资产文件夹中。所以你需要将正确的语言代码传递给 .use() 方法。

navigator.language 检测当前浏览器语言并为您提供该语言的代码。现在您正在传递正确的代码，如 en-US，现在您的资产将与 en-US.json 匹配文件名，并且您当前的 en 文件未找到错误将被删除。

如何配置 Angular 应用程序以支持多语言

How to configure Angular application for multi language support

ngx-translate

angular