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

我在互联网上做了研究，我的代码按预期工作，但我得到了一个控制台错误。这是我的密码：

src/assets/i18n/en-us.json

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

应用程序模块.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>

{{'home.helloWorld'| translate}
{{'home.great'| translate}}

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

得到http://localhost:4200/assets/i18n/en.json [HTTP/1.1 404找不到2ms]

错误 对象{头：{…}，状态：404，状态文本：“未找到”，url:http://localhost:4200/assets/i18n/en.json，ok:false，名称：“HttpErrorResponse”，消息：“Http失败响应http://localhost:4200/assets/i18n/en.json: 404未找到”，错误：“\n\n\n错误\n\n\n无法获取/assets/i18n/en.json\n\n\n”}

我的浏览器语言也是en us：

---

请指出我的错误

请在你的app.component.ts中使用此代码

this.translateService.use(navigator.language);

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

---

navigator.language

检测当前浏览器语言并为您提供该语言的代码。现在您正在传递正确的代码，如

en-US

，现在您的资产将与

en-US.json

匹配文件名，当前的

en

文件未找到错误将被删除。

您的翻译文件是en-US.json，但实际请求的文件是en.json。将其重命名或将使用的语言更改为en-us@JelleBruisten，它不应调用e.json。我的浏览器语言是alo en us。看，我刚才添加了一个屏幕截图。@tanzeel在您的资产文件夹中，en.json文件在哪里？@GaurangDhorda，路径是src/assets/i18n/en-us。json@GaurangDhorda，我没有en.json。我有en-us.json，我也想要这个。

this.translateService.use(navigator.language);