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.

Malcolmmalcom

Answer 1

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.

Malcolmmalcom

Answer 2

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/

Shortridge

just face the same issue after deployment to azure. In my case only updating the web.config file fixes the issue. – Askwith

Answer 3

For anyone encountering a similar error where translation json files cannot be found by the HttpTranslateLoader, please see the following github issue: https://github.com/ngx-translate/core/issues/921

In newer versions of Angular, Interceptors can interfere with the loading of the json asset files. The approach in the issue shows how to bypass interceptors for the translation files like this (quoted from the issue):

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

...

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

Taxation

Answer 4

In my case I just change

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

For

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

it was only a rooting problem, so sometimes we should check the basics first.

Casiecasilda

Answer 5

Try to hoot default lang to translateService using APP_INITIALIZER:

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 { }

Neoplatonism