JSON语言文件未找到 ngx-translate angular-cli

Question

我的项目是使用Angular CLI设置的，因此它是使用webpack构建的，但webpack配置文件是隐藏的。

我有两个文件，nl.json和fr.json，但对于这两个文件都会得到404错误，尽管它看起来正在访问正确的文件夹：http://localhost:4200/i18n/nl.json。

它们具有以下结构：

{
  "SEARCH_PAGE": {
    "searchPerson": "Zoek een persoon",
    "search": "Zoek"
  }
}

在 app.module 中：

...
 TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [Http]
      }
    }),
...

和

export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http, "/i18n/", ".json");
}

我也将它们包含在我的子模块中，当我尝试使用翻译时，使用.forChild而不是.forRoot的区别。

在我的组件中：

  constructor(translate: TranslateService) {
    translate.addLangs(["nl", "fr"]);
    translate.setDefaultLang('nl'); // this language will be used as a fallback when a translation isn't found in the current language

    let browserLang: string = translate.getBrowserLang();
    translate.use(browserLang.match(/nl|fr/) ? browserLang : 'nl');
  }

这可能与ngx-translate无关吗？ 当我使用管道<h1>{{ 'SEARCH_PAGE.searchPerson' | translate}}</h1>时，屏幕上什么也没有显示，当我使用指令<h1 translate]="'SEARCH_PAGE.searchPerson'"></h1>时，我得到的是字面字符串。

- gkri

Answer 1

我曾经遇到过类似的问题。

本地一切正常，但在将应用程序部署到Azure时，我遇到了404错误。 我试图在浏览器中打开/assets/i18n/.json文件，并得到了相同的错误。 问题是.json文件需要在服务器上配置特殊的MIME类型。

通过将web.config添加到软件包中，问题得以解决。

1）在app\src文件夹中创建web.config文件，其具有以下内容：

<?xml version="1.0"?>
<configuration>
<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
 </staticContent>
</system.webServer>
</configuration>

2) 通过编辑 angular.json 将此文件包含在软件包中。

projects -> <your project> -> architect -> build -> options -> assets

将src/web.config添加到assets数组中。

示例：

        ...
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/web.config"
        ],

您可以在此处查看更多信息：https://devdays.com/2014/07/21/snippet-using-json-file-on-windows-iis-iis-express/

- Oleksandr Matviishen

---

部署到 Azure 后仍然遇到相同的问题。在我的情况下，只有更新 web.config 文件才能解决这个问题。 - ramzan ali

Answer 2

我在#122中找到了答案。

在 angular-cli.json 文件中，您需要将 i18n 包含在 assets 数组中:

"apps": [
  {
  ...
  "assets": [
    "assets",
    "favicon.ico",
    "i18n"
  ],
  ...

即使您的目录不在目录中，这也能正常工作。

编辑：现在管道和目录都可以使用了。

- gkri

Answer 3

如果您遇到类似的错误，即HttpTranslateLoader找不到翻译json文件，请参阅以下github问题： https://github.com/ngx-translate/core/issues/921 在较新版本的Angular中，拦截器可能会干扰json资产文件的加载。该问题中的方法显示了如何绕过拦截器以获取翻译文件（引用自该问题）：

export function translateHttpLoaderFactory(httpBackend: HttpBackend): TranslateHttpLoader {
    return new TranslateHttpLoader(new HttpClient(httpBackend));
}

...

TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        deps: [HttpBackend],
        useFactory: translateHttpLoaderFactory
    }
}),

- Schmaga

Answer 4

在我的情况下，我只是改变了。

 export function HttpLoaderFactory(http: HttpClient){  
 return new TranslateHttpLoader(http, './assets/i18n/', '.json');}

对于

export function HttpLoaderFactory(http: HttpClient){  
return new TranslateHttpLoader(http, '../../assets/i18n/', '.json');}

这只是一个rooting问题，所以有时我们应该先检查基础知识。

- bpf

Answer 5

尝试使用APP_INITIALIZER将默认语言设置为translateService：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';

import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterInputService } from './services/router-input.service';
import { Observable } from 'rxjs/Observable';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, '/private/lifeinsurance/assets/', '.json');
}
export function initTranslation(translate: TranslateService) {
  return () => {
    translate.setDefaultLang('en');
    translate.use('en');
    return Promise.resolve();
  };
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    {
      'provide': APP_INITIALIZER,
      'useFactory': initTranslation,
      'deps': [TranslateService],
      'multi': true
    },
    RouterInputService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

- Satya J