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.
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/