Skip to content

Documentation: TranslateHttpLoader picks up HttpClient interceptors #921

@mtraynham

Description

@mtraynham

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:

Activity

changed the title [-]Documetnation: TranslateHttpLoader picks up HttpClient interceptors[/-] [+]Documentation: TranslateHttpLoader picks up HttpClient interceptors[/+] on Sep 10, 2018
n4lexeev

n4lexeev commented on Sep 27, 2018

@n4lexeev

It works without webpack. Any help?

Schmaga

Schmaga commented on Sep 23, 2019

@Schmaga

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

ukcoderj commented on May 6, 2020

@ukcoderj

In the 404 link -@antonlashan had the answer for me -> creating a custom httpclient did the trick

sardapv

sardapv commented on Apr 1, 2021

@sardapv

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

C0ZEN commented on Jul 26, 2021

@C0ZEN

Had a similar issue, causing circular dependencies.
Using instead the HttpBackend fixed it.

gergelybodor

gergelybodor commented on Jan 29, 2025

@gergelybodor

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):

const httpLoaderFactory: (http: HttpBackend) => TranslateHttpLoader = (http: HttpBackend) =>
  new TranslateHttpLoader(new HttpClient(http), 'assets/i18n/', '.json');

and don't forget to add HttpBackend as a dependency for the loader

provideTranslateService({
  defaultLanguage: DEFAULT_LANG,
  loader: {
    provide: TranslateLoader,
    useFactory: httpLoaderFactory,
    deps: [HttpBackend],
  },
}),
rbalet

rbalet commented on Jul 2, 2025

@rbalet
Collaborator

Closing as it will be resolve in the v17.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @ukcoderj@mtraynham@Schmaga@C0ZEN@sardapv

      Issue actions

        Documentation: TranslateHttpLoader picks up HttpClient interceptors · Issue #921 · ngx-translate/core