json language files are not found ngx-translate angular-cli
Solution 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.
Solution 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/
Solution 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
}
}),
gkri
Updated on June 17, 2022Comments
-
gkri almost 2 years
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
andfr.json
, but get a404
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. -
ramzan ali almost 4 yearsjust face the same issue after deployment to azure. In my case only updating the
web.config
file fixes the issue.