ngx-translate / http-loader Goto Github PK
View Code? Open in Web Editor NEWA loader for ngx-translate that loads translations with http calls
License: MIT License
A loader for ngx-translate that loads translations with http calls
License: MIT License
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.
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"
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.
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 { }
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"
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?
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.
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
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
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
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`));
}
}
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
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.
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?
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.
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 ?
Should upgrade release to 3 to match ngx-translate 9.0's rxjs dependency of 5.5.2
Line 69 in 3be3a07
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!
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?
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?
Adding the request headers is missing like authorization is missing
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();
});
});
`
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?
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"
}
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.
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
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.
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
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,
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.
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!!!!!!!!!!!
On IE11 getBrowserLang() always returns 'en' for us even though the language settings are set to German (or other languages).
Return the correct language
Return the correct language
Set the language on IE11 to German
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:
The i18n JSON file isn't loaded when RxJs 6.3.0 is installed.
I expect the JSON file is loaded correctly.
I don't realize why this occurs but after downgrade the RxJs version to 6.2.2 it worked fine.
@ngx-translate/core": "10.0.2",
@ngx-translate/http-loader": "3.0.1"
Angular version: "6.1.6"
Browser:
For Tooling issues:
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.
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.
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()
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()),
);
}
[...]
}
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.
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
"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?
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');
}
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!
Currently TranslateHttpLoader produces HTTP request every time getTranslation is called.
TranslateHttpLoader should store state of language file loading and only one HTTP request is made.
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();
}
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.
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
The README still explains using Http
in the HttpLoaderFactory
instead of HttpClient
.
Do you expect any new release that will support Angular 4? Project is already updated.
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);
}
});
}
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.
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.2
and its working pretty good.
Thanks
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;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.