- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 592
Closed
Description
Current behavior
The documentation suggests using the TranslateHttpLoader for downloading the the translation files. If there are HttpInterceptors
, such as for Authentication, provided in the application, this can have unwanted side-effects.
Expected behavior
Realistically, you only want to use the TranslateHttpLoader without HttpInterceptors. This can be achieved using the HttpBackend class, as described here.
How do you think that we should fix this?
Update the documentation to suggest this is a problem, and the alternative is to use the HttpBackend with HttpClient to ignore interceptors, like so:
export function translateHttpLoaderFactory(httpBackend: HttpBackend): TranslateHttpLoader {
return new TranslateHttpLoader(new HttpClient(httpBackend));
}
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
deps: [HttpBackend],
useFactory: translateHttpLoaderFactory
}
}),
Minimal reproduction of the problem with instructions
Use an HttpInterceptor in the App that appends an external base url to all calls, thus breaking the location of the TranslateHttpLoader.
import {Inject, Injectable} from '@angular/core';
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs';
import {API_BASE_URL_TOKEN} from '../../shared/config.module';
@Injectable()
export class ApiBaseUrlInterceptor implements HttpInterceptor {
private readonly apiBaseUrl: string;
constructor(@Inject(API_BASE_URL_TOKEN) apiBaseUrl: string) {
this.apiBaseUrl = apiBaseUrl;
}
public intercept(request: HttpRequest<any>,
next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request.clone({url: `${this.apiBaseUrl}${request.url}`}));
}
}
Environment
ngx-translate version: 10.0.2
Angular version: 6.1.7
Browser:
- [ ] 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: XX
- Platform:
Others:
Solomko2, Schmaga, Robert-Beier, llyrowenjones, gzsupos and 15 morellyrowenjones, heunetik, scottbabcock, blumk, sardapv and 1 more
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
[-]Documetnation: TranslateHttpLoader picks up HttpClient interceptors[/-][+]Documentation: TranslateHttpLoader picks up HttpClient interceptors[/+]n4lexeev commentedon Sep 27, 2018
It works without webpack. Any help?
Schmaga commentedon Sep 23, 2019
I posted the link to this issue as solution to some other issues I found and studied during my own research. They all seem to point to exactly the same problem in Angular 8 when using Interceptors. This issue here was a godsend that fixed the problem for me :)
ukcoderj commentedon May 6, 2020
In the 404 link -@antonlashan had the answer for me -> creating a custom httpclient did the trick
sardapv commentedon Apr 1, 2021
it works but don't know why folder name has to be i18n mandatory. other name doesn't work 😞 spent 2 hrs on this
C0ZEN commentedon Jul 26, 2021
Had a similar issue, causing circular dependencies.
Using instead the
HttpBackend
fixed it.gergelybodor commentedon Jan 29, 2025
this is still a problem in 2025... and I'm glad I found this issue
if you have some interceptor in angular v19 that has some dependency injected, it can cause circular dependency errors when you try to load translations with http client
provideHttpClient(withInterceptors([yourInterceptor]))
modify your function like so (this worked for me):
and don't forget to add
HttpBackend
as a dependency for the loaderrbalet commentedon Jul 2, 2025
Closing as it will be resolve in the v17.