找不到 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> 时，屏幕上什么也看不到我从字面上得到了字符串。

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/