Documentation: TranslateHttpLoader picks up HttpClient interceptors

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

[n4lexeev]

It works without webpack. Any help?

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

[JsAndDotNet]

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

[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]

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