ngx-translate/http-loader

A loader for ngx-translate that loads translations with http calls

@ngx-translate/http-loader

A loader for ngx-translate that loads translations using http.

---

⚠️ The content of this repository was moved to the main ngx-translate repository

http-loader's Issues

App can't find language json files

"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

message: "Http failure response for https://project-name.azurewebsites.net/assets/i18n/en.json: 404 Not Found"
name:"HttpErrorResponse"
status:404
statusText:"Not Found"
url:"https://project-name.azurewebsites.net/assets/i18n/en.json"

When in the browser I go to assets/images/anything.jpg, it loads fine. When I rename assets/i18n/en.json to en.json.txt and browse to it, it loads fine. Change it back to .json, won't load again.

Anyone knows how to fix this issue?

Loader does not work with IE11

I'm having trouble getting the loader to work with IE11,

ERROR TypeError: Unable to get property 'get' of undefined or null reference

Stepping through it reveals that this.http is undefined here:

TranslateHttpLoader.prototype.getTranslation = function (lang) {
    return this.http.get("" + this.prefix + lang + this.suffix)
        .map(function (res) { return res.json(); });
};

The same code works fine for half my team, suggesting that it's a race condition. I suspect that it's related to angular/angular#15501 (which I found after reading through this issue), but I'm not sure.

Can't resolve all parameters for TranslateHttpLoader

When compiling my code with ionic/cordova I keep getting the error once the Angular Compiler has started:

Can't resolve all parameters for TranslateHttpLoader in 
           /<project-root>/node_modules/@ngx-translate/http-loader/src/http-loader.d.ts:
            ([object Object], ?, ?). 

ng -v info:

Angular CLI: 1.7.3
Node: 8.9.3
OS: darwin x64
Angular: 5.0.0
... compiler, compiler-cli, core, forms, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular/common: 5.2.8
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

UPDATE:
Here is the app.module.ts

import { Injectable, Injector, NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule, Http, RequestOptions } from '@angular/http';
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";

import { IEPortal } from './app.component';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './../assets/i18n/', '.json');
}
 
@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [ HttpClient ]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    HomePage
  ],
  providers: [
    { provide: ErrorHandler, useClass: EdgeError },
  HttpClient
  ]
})
export class AppModule {}

I will take any suggestions at this point.

Also, I must have typescript >= 2.4.2 < 2.5.0 for several of my other plugins.

Multiple lang files

Hi, is there a way to split a single lang file?
I have my lang files that is going to be very large and I want to split these into multiple files for each lang.
Is it possible?

Thanks
Fabrizio

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.

regression of #11 (base href ignored)

current code says
constructor(private http: HttpClient, public prefix: string = "/assets/i18n/", public suffix: string = ".json") {}

but #11 requested ./assets/i18n/

frankly, assets/i18n would/should work too

getTranslation not returning body of the Response object

Hello,

I don't know if this is overlooked, but i see that in commit 65001abd for 1.0.0 release .json() was removed.

I guess that since http-loader is for general use, and that use is loading json files or any other REST call, which will go through http.get() call, it needs .json() to extract the data from the response.

Thank you.

Mario

404 Error with webpack and interceptor

Im using nativescript-angular

TranslateModule.forRoot({
            loader: {
            provide: TranslateLoader,
            deps: [HttpClient],
            useFactory: (createTranslateLoader)
            }
        })
....
     {
            provide: HTTP_INTERCEPTORS,
            useClass: HttpInterceptorService,
            multi: true
        },
...
export function createTranslateLoader(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient, "/i18n/", ".json");
}

when i build it with webpack it shows error

ERROR {
"headers": {
"normalizedNames": {},
"lazyUpdate": null,
"headers": {}
},
"status": 404,
"statusText": "ERROR",
"url": "/Users/(*/Library/Developer/CoreSimulator/Devices/2F58ECC2-2E99-46D3-91CC-FC74A3DED5DC/data/Containers/Bundle/Application/ED168D77-6FEE-427F-A08D-DF19CC9EA41F/*.app/app/i18n/ru.json",
"ok": false,
"name": "HttpErrorResponse",
"message": "Http failure response for /Users/*/Library/Developer/CoreSimulator/Devices/2F58ECC2-2E99-46D3-91CC-FC74A3DED5DC/data/Containers/Bundle/Application/ED168D77-6FEE-427F-A08D-DF19CC9EA41F/*.app/app/i18n/ru.json: 404 ERROR",
"error": "Not Found"
}

Loading Translations . json from an external npm package

Hi there,

All my translations files are in a external library e.g. @translations/my-translations. I cannot access to node_modules at runtime. How could I load them using @ngx-translate/http-loader?

Thanks.

Update HttpLoaderFactory in README

The README still explains using Http in the HttpLoaderFactory instead of HttpClient.

getBrowserLang() not working on IE11

Current behavior

On IE11 getBrowserLang() always returns 'en' for us even though the language settings are set to German (or other languages).

Expected behavior

Return the correct language

How do you think that we should fix this?

Return the correct language

Minimal reproduction of the problem with instructions

Set the language on IE11 to German

Environment

ngx-translate version: 10.0.2
Angular version: 6.1.9


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [x] IE version 11
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

ngx-translate access other baseurl

I use this url to load my Login Ui: http://localhost:5000/login.
But in console, it printed error: http://localhost:8081/api/assets/i18n/ja.json 401 (Unauthorized).
It access to my api url.
It should be access this url http://localhost:5000/assets/i18n/ja.json instead.
I do a simple configuration.

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

I found this configuration in my project:

{
  "bffBaseUrl": "http://localhost:8081"
}

How can I make it access to http://localhost:5000/assets/i18n/ja.json ?

subscribe to router event

I have ngx-translate ChangeLanguage function on navigation (nav is insert on every component), it works fine and translates text as per json in given component.
However, when user routes to another component through [routerLink]=, it forgets about earlier language selection made.
How can I make app remember, earlier language preference?

ngOnInit() {
// subscribe to router event
this.subscription_translate = this.activatedRoute.queryParams.subscribe(
(param: any) => {
let locale = param['locale'];
if (locale !== undefined) {
this._translate.use(locale);
}
});
}

Is this actually being supported?

I'm not sure if the docs are complete. Is the loader ready to use? How do I configure it to make the HTTP call to my server to fetch the translation JSON file?

[ISSUE] RxJs 6.3.0

Current behavior

The i18n JSON file isn't loaded when RxJs 6.3.0 is installed.

Expected behavior

I expect the JSON file is loaded correctly.

How do you think that we should fix this?

I don't realize why this occurs but after downgrade the RxJs version to 6.2.2 it worked fine.

Minimal reproduction of the problem with instructions

• Follow the configuration steps.
• Upgrade RxJs to 6.3.0.
• Serve the app.
• Check that json file is loaded.

Environment

@ngx-translate/core": "10.0.2",
@ngx-translate/http-loader": "3.0.1"
Angular version: "6.1.6"

Browser:

• [X ] Chrome (desktop) version XX
• Chrome (Android) version XX
• Chrome (iOS) version XX
• Firefox version XX
• Safari (desktop) version XX
• Safari (iOS) version XX
• IE version XX
• Edge version XX

For Tooling issues:

• Node version:8.11.1
• Platform: Mac

No option to set headers

Hi!

I can't get any .json, because there is not option to set up headers to requests.
Now, I can solve it within .htaccess file, but it is not a real solution. I would be glad if I could set headers to requests.:)

Connection with:
#9
#19

Support for error handling from `http.get`

Currently if there are any errors from http.get (e.g. the file does not exist) the error is propagated to the top level of the app and there's no way to catch it.

I suggest support for adding an error handler function -- something like:

    constructor(private http: HttpClient, public prefix: string = "/assets/i18n/", public suffix: string = ".json", public errorHandler?: () => any) {}

    public getTranslation(lang: string): any {
      const obs = this.http.get(url);
      if (this.errorHandler) {
        obs.catch(this.errorHandler);
      }

      return obs;
    }

Waiting for the translations being loaded before translating

Hi,

I am using a CustomLoader over http to get my translations (Angular 5).

Unfortunately, I am requesting some translations in a service at app launch, so the translations are done straight away, before the files are loaded.

Is there a way to tell the Translater to wait for the HttpLoader to be done before doing the translations?

I tried to look around on stackoverflow without success...

Thanks!

How load translation file for each module

I have app.module.ts like this:

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    Routing,
    AuthModule,
    CatalogsModule,
    DashboardModule
  ],
  exports: [],
  declarations: [AppComponent, SvgIconComponent, NotFoundComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

AuthModule:

function AuthHttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, 'i18n/auth/', '.json');
}

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: AuthHttpLoaderFactory,
        deps: [HttpClient]
      },
      missingTranslationHandler: [{provide: MissingTranslationHandler, useClass: TranslateHandler}]
    })
  ],
  declarations: [IndexComponent, ...],
  bootstrap: [IndexComponent],
  providers: [...]
})
export class AuthModule {}

CatalogsModule:

function CatalogsHttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, 'i18n/catalogs/', '.json');
}

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: CatalogsHttpLoaderFactory,
        deps: [HttpClient]
      },
      missingTranslationHandler: [{provide: MissingTranslationHandler, useClass: TranslateHandler}]
    })
  ],
  declarations: [CatalogComponent, ClientComponent]
})
export class CatalogsModule {}

Now if i go to auth page i'm load /i18n/catalogs/ru.json, but should have been loaded /i18n/auth/ru.json
If i swap places AuthModule & CatalogsModule in app.modules.ts - will be loaded /i18n/auth/ru.json (as expected).

How to load current module translation file?

Version 1.0.0

Just a small suggestion, could the version number be upped to 1.0.0 or if you want 6.0.0?
This is because the ^0.0.3 won't update patches automatically but ^1.0.0 does.

Error in http-loader.d.ts

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

[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

Current behavior
The definition tell us that it return an type <any>

Expected/desired behavior
The definition should return Observable<any>

Reproduction of the problem

1. Creating a class who inherit of the TranslateHttpLoader
2. using super.getTranslation

What is the motivation / use case for changing the behavior?
Does have to cast to get the right intellisense.

• ngx-translate/http-loader version: 1.1.0

• Angular version: 4.4.4

• Browser: N/A

but should be

Missing request headers

Adding the request headers is missing like authorization is missing

Unable to use TranslateLoader in Angular 7

Current behavior

When I use http-loader to load translations from my API, my APP crashes with the following error displayed on the console:

"this.textApi.list" is the method I call when I overwrite TranslateLoader::getTranslation()

Minimal reproduction of the problem with instructions

My app.module.ts looks like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { NgxWebstorageModule } from 'ngx-webstorage';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { Insomnia } from '@ionic-native/insomnia/ngx';
import { Device } from '@ionic-native/device/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ComponentsModule } from './components/components.module';
import { TranslateLoaderService } from './services/translate-loader/translate-loader.service';

@NgModule({
    declarations: [
        AppComponent,
    ],
    entryComponents: [],
    imports: [
        BrowserModule,
        IonicModule.forRoot({
            backButtonText: '',
            backButtonIcon: 'ios-arrow-back',
            spinner: 'dots',
            refreshingSpinner: 'dots',
            loadingSpinner: 'dots',
            infiniteLoadingSpinner: 'dots',
        }),
        NgxWebstorageModule.forRoot({prefix: 'tax-rd', separator: '.'}),
        AppRoutingModule,
        ComponentsModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useClass: TranslateLoaderService,
                deps: [HttpClient],
            },
        }),
    ],
    providers: [
        SplashScreen,
        Insomnia,
        Device,
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
    ],
    bootstrap: [AppComponent],
})
export class AppModule {
}

And, this is my TranslateLoaderService:

import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { TextApiService } from '../../api/text-api/text-api.service';

@Injectable({
    providedIn: 'root',
})
export class TranslateLoaderService implements TranslateLoader {

    constructor(
        private textApi: TextApiService,
    ) {
    }

    getTranslation(langId: string): Observable<any> {
        return this.textApi.list(langId);
    }
}

Finally, this is my TextApiService...

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { ClientApiService } from '../client-api/client-api.service';

@Injectable({
    providedIn: 'root',
})
export class TextApiService extends ClientApiService {

    list(idiomaId: string): Observable<any> {
        return this.get('/idiomas', null, idiomaId);
    }

}

... and my ClientApiService (only get method is copied to simplify):

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
import { HttpParamsOptions } from '@angular/common/http/src/params';
import { Observable, throwError } from 'rxjs';
import { catchError, share, timeout } from 'rxjs/operators';

import { SERVER_URL } from '../../../environments/environment';

@Injectable({
    providedIn: 'root',
})
export class ClientApiService {

    private acceptLanguage: string;   
    private readonly timeout: number;

    constructor(
        private http: HttpClient,
    ) {
        this.acceptLanguage = 'es';
        this.timeout = 8000;
    }

    get(endpoint, searchParams?: HttpParams | string | any, acceptLanguage?: string): Observable<any> {
        const requestOptions = this.getRequestOptions(acceptLanguage || this.acceptLanguage);

        if (searchParams) {
            if (searchParams instanceof HttpParams) {
                requestOptions.params = searchParams;
            } else {
                if (searchParams instanceof Object) {
                    requestOptions.params = new HttpParams({
                        fromObject: searchParams,
                    } as HttpParamsOptions);
                } else if (typeof searchParams === 'string') {
                    requestOptions.params = new HttpParams({
                        fromString: searchParams,
                    } as HttpParamsOptions);
                }
            }
        }

        return this.http
            .get(this.getEndpoint(endpoint), requestOptions)
            .pipe(
                timeout(this.timeout),
                share(),
                catchError(this.handleError()),
            );
    }

   [...]

}

Environment

ngx-translate/core version: 11.0.1
ngx-translate/http-loader version: 4.0.0
Angular version: 7.2.13
Ionic version: 4.3.1

So, I'm doing something wrong or there is a bug on ngx-translate?

Any help will be appreciated. Thanks.

Cannot find module "@angular/common/http"

I have upgraded my npm to the latest version. The npm folder in my Visual Studio Application reads v6.0.3 while my package.json file also corresponds to this version 6.0.3.

But anytime i run my application i get the error cannot find module on the broswer

I believe HttpClient is used in versions above 3x but obviously have a higher version installed.

Please HELP!!!!!!!!!!!

WebpackTranslateLoader example in the document is not accurate for Angular 6 /Rxjs 6

With the release of rxjs 6, the imports and creation of Observables have changed. There is no more fromPromise which has been replaced by from

This is how I updated the code to have it working:

import { TranslateLoader } from '@ngx-translate/core';
import { Observable, from } from 'rxjs';

export class WebpackTranslateLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    return from(System.import(`../assets/i18n/${lang}.json`));
  }
}

Should upgrade release to 3 to match ngx-translate 9.0's rxjs dependency

Should upgrade release to 3 to match ngx-translate 9.0's rxjs dependency of 5.5.2

http-loader/package.json

Line 69 in 3be3a07

"rxjs": "5.4.0",

Wrong http response handling

Error: URLs requested via Http on the server must be absolute.

EDIT: nevermind, just use ngx-universal, since I'm using Universal (hope I solve the Cannot resolve 'fs' module thing).

---

Writing this

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

rather than this

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

leads to Error: Uncaught (in promise). It would be nice to have an automatic way to retrieve the origin. Or I'm missing something.

Latest angular (5.x) support

I'm using @angular/common ^5.1.0-rc.0.

My build breaks on production with npm ERR! peerinvalid Peer @ngx-translate/[email protected] wants @angular/common@>=4.3.0

Would be nice if the peerDependencies was something like "@angular/common": ">=4.3.0 || >=5.0.0"

Fallback instead of 404 error when translation file don't exist

Hello,

I get the culture info from a third party system. So it can be any culture of the world. When a culture isn't present as .json file it throws a 404 error such as :

main.js:1 GET .../assets/i18n/af.json 404 (Not Found)

Would it be possible if the file don't exist to fallback on english (en.json) instead of making a 404 error?

Thanks

Bug when build app NativeSctipt

im using ngx-translate/http-loader for function i18n. when run in emulator app build and run success, but i run in device with tns preview it reported an error Plugin @ngx-translate/core is not included in preview app on device 53AD3731-6416-4E8D-BDCA-A463A5028F69 and will not work.
Plugin @ngx-translate/http-loader is not included in preview app on device 53AD3731-6416-4E8D-BDCA-A463A5028F69 and will not work. please help me !!!!. Thank you

Multiple HTTP requests

Current behavior

Currently TranslateHttpLoader produces HTTP request every time getTranslation is called.

Expected behavior

TranslateHttpLoader should store state of language file loading and only one HTTP request is made.

How do you think that we should fix this?

This is how I implemented this (proof of concept, it performs only ONE request, everything works and tokens are translated):

	private errorState = false;
	private waiter = new Subject<Object>();
	private requestedLang: string;

    getTranslation(lang: string): Observable<Object>
	{
		if(this.errorState)
			return of({});

		if(this.requestedLang != null && this.requestedLang == lang)
			return this.waiter.asObservable();

		let languagPath = `assets/locale/${lang}.json`;

		this.requestedLang = lang;

		this.http.get(languagPath).pipe(
				catchError(error => {
					console.warn("can't load language file", languagPath, error);
					this.errorState = true;
					return of({});
				})
			).subscribe(result => {
				//console.log("translation", lang,"loaded!");
				this.waiter.next(result);
			});

		return this.waiter.asObservable();
	}

Minimal reproduction of the problem with instructions

Even standard ngx-translate template calls getTranslation at least two times.
My app got approximately 140 (app with multiple pages and modules) and lots of annoying alerts were displayed in case when translations were not found. If success, other requests fetched (304), but fetch still has delay.

Environment

ngx-translate version: 11.0.1
Angular version: 7.1.4

Browser:
- [x] Chrome (desktop) version XX

 
For Tooling issues:
- Node version: 10.15
- Platform:  Windows

Giving error with Http Library

Hi there.

i had ng2-translate working in a ionic3 project and i'm trying to upgrade to the ngx-translate.

When i try to follow this readme, i'm getting this error:

Argument of type 'Http' is not assignable to parameter of type 'Http'. Property '_backend' is protected but
            type 'Http' is not a class derived from 'Http'.

     L114:  export function HttpLoaderFactory(http: Http) {
     L115:      return new TranslateHttpLoader(http);

As a workaround o copied the TranslateHttpLoader from this repo and pasted in my project.

Maybe need to upgrade the angular version from the package.json from this project?
Here i'm using angular 4.1.2and its working pretty good.

Thanks

Update @ngx-translate/core peer dependency.

npm WARN @ngx-translate/[email protected] requires a peer of 
@ngx-translate/core@^6.0.0 but none was installed.

Since core 7.0.0 was released http-loader's peer dependency needs to be updated.

The pipe 'translate' could not be found in uni test

when i want to run ng test, the output karma is: The pipe 'translate' could not be found ...
my .spec.ts file

`import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {DashboardComponent} from './dashboard.component';

describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DashboardComponent]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
`

output karma:

Cant add nested objects

when hierarchy son object:
{ "first": {}, "second": ""}
get

error happened Http error (unsuccessful reponse).
Message: Http failure during parsing for https://localhost:4200/assets/i18n/ar.json, status code: 200,

Not working with Angular 9.1

ERROR in node_modules/@ngx-translate/http-loader/lib/http-loader.d.ts:4:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@ngx-translate/http-loader) which declares TranslateHttpLoader has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",

When will this be fixed?

Incorrect peer dependencies

In package.json there's the following block:

"peerDependencies": {
  "@ngx-translate/core": ">=6.0.0",
  "@angular/core": ">=4.3.1",
  "@angular/http": ">=4.3.1"
},

where there seems to be a peerDependency for @angular/http which the package doesn't depend on anymore as it is now based on the new HttpClient. Instead peerDependency should point to @angular/common which includes the @angular/common/http and thus the HttpClient.

While on the topic of peerDependencies, is 2.3.1 the correct version to be required as it is already the 2.3.0 that implements the HttpClient? Might be that there's some bug in 2.3.0 that was only fixed on 2.3.1.

Error: parsing json file angular 5

I just updated to Angular 5. I am using asp-prerendering from .Net Core 2 feature.
I import the plugin using

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

and

export function createTranslateLoader(http: HttpClient, baseHref: string) {
    // Temporary Azure hack
    if (baseHref === null && typeof window !== 'undefined') {
        baseHref = window.location.origin;
    }
    // i18n files are in `wwwroot/assets/`
    return new TranslateHttpLoader(http, `${baseHref}/assets/i18n/`, '.json');
}

I am receiving the following error: NodeInvocationException: Http failure during parsing for http://localhost:50475/assets/i18n/en.json

If I disable pre-rendering or I don't import ngx-translate plugin, everything works.

Change log not clearly stating the move from Http to HttpClient

Change log for 1.0.0 refers only to the fact that the library is only compatible with Angular 4.3. What is should instead list as breaking change is that it now uses HttpClient instead of old Http. This is a breaking change when you have for example the following code:

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './my-path', '.json');
}

this needs now to be refactored as follows:

export function createTranslateLoader(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, './my-path', '.json');
}

New release support Angular 4

Do you expect any new release that will support Angular 4? Project is already updated.

how to load multiple translation files from different sources?

Hi!

Can you please advise how can add additional translation files from some lazy loaded AOT module / library?

As an example, I have basic en.json in my application and want to add additional translations from my-library-en.json inside MyLibraryModule.

Thanks in advance!

Retrieve Contents of a Recordset read from MSSQL nodejs

I have a get API that queries a database and returns details abut the parameter supplied. Below is the code the returns a recordset saved in result variable

router.get('/:examno', (req, res) => { 
    var request = new sql.Request();
    // query to the database and get the records
    request.input('examno', sql.NVARCHAR, req.params.examno);
    request.execute('dbo.spGetCandidatesDetails', function (err, result) {    
        if (err) console.log('Error in retrieving Candidate : ' + JSON.stringify(err, undefined, 2));


      // send records as a response
   res.send(result);   
    });
});

I have a get API that queries a database and returns details abut the parameter supplied. Below is the code the returns a recordset saved in result variable

router.get('/:examno', (req, res) => {
var request = new sql.Request();
// query to the database and get the records
request.input('examno', sql.NVARCHAR, req.params.examno);
request.execute('dbo.spGetCandidatesDetails', function (err, result) {
if (err) console.log('Error in retrieving Candidate : ' + JSON.stringify(err, undefined, 2));

  // send records as a response

res.send(result);
});
});
The recordset returns this in JSON

"recordsets": [
        [
            {
                "CandidateID": 1,
                "CandidateExamNo": "12345",
                "CandidateSubjectCombination": "1:2:3:4",
                "CandidateToken": "7e7b3055-0c5b-47b2-81ae-0815cef16e9d",
                "CandidateName": "Testing Testing Microphone"
            }
        ]
    ],
    "recordset": [
        {
            "CandidateID": 1,
            "CandidateExamNo": "12345",
            "CandidateSubjectCombination": "1:2:3:4",
            "CandidateToken": "7e7b3055-0c5b-47b2-81ae-0815cef16e9d",
            "CandidateName": "Testing Testing Microphone"
        }
    ],
    "output": {},
    "rowsAffected": [],
    "returnValue": 0

Now, i want to read the contents of the recordset into a variable to be able to have access to each of the field names in the recordset.

Thanks.

Cached JSON file

When new bundle is deployed to production server and new translation keys have been added, last JSON is cached.
It would be nice if, somehow, the loader could fetch the last version of the JSON file.

The way I provide the loader is like this:

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

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [ Http ]
      }
    })
  ]
}
export class CoreModule { }

Cannot find module '@angular/common/http'.

I can't get it to work with ionic 3.6 with the latest version.
I'm keeping get this error:

Typescript Error
Cannot find module '@angular/common/http'.
node_modules/@ngx-translate/http-loader/src/http-loader.d.ts

I had an old project that i was using ngx-translate with ionic so i checked the version.
If i downgrade to the version below it seems to work:

"@ngx-translate/core": "^6.0.0",
"@ngx-translate/http-loader": "0.0.3"

HttpClient

Would be nice for people that have updated to use the new HttpClient in @angular/common/http to have a separate loader here that uses it instead of Http.

System.js import

Hello, I have installed http-loader (npm install @ngx-translate/http-loader --save) and I'm importing it into my project directly from node_modules.

I have edited my systemjs config file and added '@ngx-translate/http-loader': 'node_modules/@ngx-translate/http-loader/bundles' in the map and '@ngx-translate/http-loader' : { defaultExtension: 'js' } in packages.

But I get the following error:

Failed to load resource: the server responded with a status of 404 (Not Found)
zone.js:661 Unhandled Promise rejection: Fetch error: 404 Not Found
Instantiating http://localhost:8080/node_modules/@ngx-translate/http-loader/bundles

Can you tell me what's wrong?

Cannot GET /assets/i18n/fr.json

Hi,
Since angular/cli 1.7, I cannot get assets:

Before submit an issue to angular/cli can you reproduce to this issue?

Handling a situation where host required authentication

When in a case where host resource server needs authentication or validation its obvious we should pass the various options with http request.
However since the current http.get of this package method doesn't get configured with any options, Is it good idea to implement that feature?

Loader does not work with base-href set

When having a base-href set, the loader ignores it and can't fetch the i18n files.

Example:
"build": "ng build --aot --prod --base-href /somestring/",

All requests are ignoring the base-href: "/assets/i18n/en.json" instead of "/somestring/assets/i18n/en.json".
Adding a dot to the prefix ("./assets/i18n/") fixes the problem.