Core: Use with angular-cli

[maxime1992]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Just me, not really aware of webpack configuration ...

Current behavior
I use angular-cli. So currently my architecture is something like

| src 
   | app
   | assets
      | i18n
         | fr.json
         | en.json

But I get the following error :
Uncaught Response with status: 404 Not Found for URL: http://localhost:4200/i18n/fr.json

Expected/desired behavior
Get my json file, what do I have to do ?

Please tell us about your environment:
angular-cli#1.0.0-BETA-15

• ng2-translate version: 2.5.0
• Angular version: 2.0.0
• Browser: Chrome
• Language: TypeScript 2.0.2

Thanks for any help :)

[maxime1992]

My bad ...
This works perefctly and it's in the readme ;)

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        TranslateModule.forRoot({ 
          provide: TranslateLoader,
          useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
          deps: [Http]
        })
    ],
    exports: [BrowserModule, HttpModule, TranslateModule],
})

[cbeldacap]

Hello @maxime1992 , I am currently facing the same problem. Using angular-cli as well and having the same in app.module.ts. But even so, .json files are never loaded (none of the in the "Network" tab on Chrome DevTools).

Should I do anything different from the README file?

thnx so much in advance

[MalliswariKulala]

By default, the angular-cli is searching for this path 'http://localhost:4200/i18n/fr.json'. I have placed i18n folder outside the assets folder and the app is working fine.

Im facing issues with unit test cases.
The pipe 'translate' could not be found
(OR)
404 file not found error in "http://localhost:9876/i18n/fr.json"...

My imports in spec file:

imports: [TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, '/i18n', '.json'),
deps: [Http]
})]

Someone help me with this... Thanks in advance....

[maxime1992]

@cbeldacap sry I missed the notification ...

Do you still have this issue ?

---

@MalliswariKulala I think you should rather do : new TranslateStaticLoader(http, './i18n', '.json'). (notice the dot beofre /i18n.

Plus, putting your i18n folder at the root of your project is probably not the best option.

You should create a folder i18n in assets folder and just do new TranslateStaticLoader(http, './assets/i18n', '.json');

[cbeldacap]

@maxime1992 Hi, just solved it. The problem was that I had a http interceptor and was catching every single call to .json files, so no interceptor -> no problem. Thnx anyway!

[MalliswariKulala]

@maxime1992 Thanks Maxime... I placed i18n folder in assets folder and have defined this configuration 'new TranslateStaticLoader(http, './assets/i18n', '.json')' in app.module.ts.

It working now :)

[hvrz39]

@MalliswariKulala did you solve your unit test issue? I'm facing the exact same problem you mentioned. Actually, I already had placed on my root folder the 'assets/i18n/es.json' folder and still having the
' Response with status: 404 Not Found for URL: http://localhost:9876/assets/i18n/es.json' when running my unit tests.

This is my import spect definition:

imports: [
RouterTestingModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
TranslateModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, './assets/i18n', '.json'),
deps: [Http]
}),

Thanks in advance.

[ocombe]

@hvrz39 if you unit test, you should use MockBackend and MockResponse to emulate the server for http requests: https://github.com/ngx-translate/http-loader/blob/master/tests/http-loader.spec.ts
If for some reason you really need the original file, then you should check the url, karma changes the url of the files that it serves, so it wouldn't be /assets/... but probably something like /base/assets/...

[elendil-software]

Hi,

I have the same problem, I get the error GET http://localhost:4200/i18n/en.json 404 (Not Found)

One thing I don't understand is why does it try to load /i18n/en.json if I put new TranslateHttpLoader(http, './assets/i18n/', '.json'); in my app.module ?

My configuration :

_in app.module.ts_

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

and

`imports: [

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

_app.component.ts_

@Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { constructor(translate: TranslateService) { translate.setDefaultLang('en'); translate.use('en'); } }

_app.component.html_
... <span class="title">{{ 'HELLO' | translate}}</span> ...

Note : If I put the i18n json files in ./i18n/ and not in ./assets/i18n/ I have not the error but the string are not translated

Environment :

angular-cli : 1.0.0-beta.26
ngx-translate/core : 6.0.0
ngx-translate/http-loader : 0.0.3
Angular : 2.4.8

Tested with Firefox and Chrome

[hvrz39]

@ocombe man! you are right, I should use MockBackend and MockResponse on my unit testing. But let's say I want to perform an integration test, I'm still having the same 404 Not Found for URL: http://localhost:9876/assets/i18n/es.json' error.

[AlexKhymenko]

Is it possible to natively in configuration file of angular cli merge json files?? For example i have a lot of json files in different directories like locale-en-GB.json and i want to merge them into one locale-en-GB.file. So angular 2 translator can use it.

[elendil-software]

Hi,

I finally found where was my mistake. I had some imports from the previous version (import { ... } from "ng2-translate").

[amustaine]

Was the same problem, in my case this issue was not related with ng2-translate. Solved after "angular-in-memory-web-api" package was removed.

[vinodkumartiwari]

Open .angular-cli.json and add the folder i18n to resolve the error: GET http://localhost:4200/i18n/es.json 404 (Not Found)

Example:
"apps": [
{
"assets": [
"i18n"
],
...
Try to browse http://localhost:4200/i18n/en.json. Hope this will help to resolve the 401 issue.

Try using https://github.com/vinodkumartiwari/angular2-ngx-translate-demo-angular-cli.git

[pankajsri03]

I am facing same issue but only on production environment. My folder structure looks like assets->i18n -> en.json . And this is how i have registered it in app.module.
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
}

[valburyakov]

@pankajsri03 Hello, did you resolve your issue with loading json on production ? I've faced the same issue, locally it works well, but when we deploy to aws s3 (bucket is used as assets for hosting) and then json is not loaded and i got an 500 error. Seems nginx doesn't allow to load it or it doesn't know where this file is

[pankajsri03]

@valburyakov We were able to solve this by creating a web.config file in our server folder of angular app. Below is the code we used

read more here :
https://stackoverflow.com/questions/19516829/allow-loading-of-json-files-in-visual-studio-express-2013-for-web