json language files are not found ngx-translate angular-cli

Question

My project is set up with Angular CLI, so it's built with webpack but the webpack config files are hidden.

I got two files, nl.json and fr.json, but get a 404 for both, even though it looks like it's going to the correct folder: http://localhost:4200/i18n/nl.json.

They have this structure:

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

In app.module:

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

and

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

I also include these in my sub module where I [try to] use the translation, with the difference of .forChild instead of .forRoot.

In my component:

  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');
  }

Could it be something not linked to ngx-translate ? When I use the pipe <h1>{{ 'SEARCH_PAGE.searchPerson' | translate}}</h1> I get nothing on the screen, when I use the directive <h1 translate]="'SEARCH_PAGE.searchPerson'"></h1> I get literally the string.

Answer 1

I had similar problem.

Everything worked fine locally but I was getting 404 errors when deployed app to Azure. I tried to open /assets/i18n/.json in my browser and got the same error. The issue was that .json files requred special MIME type configured on server.

The problem was resolved by adding web.config to the package.

1) create web.config file in app\src folder with following body:

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

2) Include this file to the package by edditing angular.json

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

Add src/web.config to the assets array

Example:

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

You can see more info here: https://devdays.com/2014/07/21/snippet-using-json-file-on-windows-iis-iis-express/

Answer 2

Just found the answer in #122 .

In angular-cli.json you have to include i18n in the assets array:

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

This works even if your i18n directory is not inside your assets directory.

EDIT: and now both the pipe and the directory work.