Skip to content

Documentation: TranslateHttpLoader picks up HttpClient interceptors #921

Open
@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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions