From 880e3c9a47b5afae00aca08d7d9fba8c0664eb62 Mon Sep 17 00:00:00 2001
From: Ken Blum <ken.blum@outlook.com>
Date: Thu, 3 Sep 2020 10:58:31 +0200
Subject: [PATCH] docs(README): add section for avoiding side-effects with
 HttpInterceptors

---
 README.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/README.md b/README.md
index 75b6aa08..6b42478f 100644
--- a/README.md
+++ b/README.md
@@ -207,6 +207,42 @@ export function createTranslateLoader(http: HttpClient) {
 export class AppModule { }
 ```
 
+##### Avoiding side-effects with HttpInterceptors
+
+If you are using custom `HttpInterceptors` (e.g. provided by an authentication library), you should bypass all `HttpInterceptors` when loading translation files.
+
+This can be achieved using the `HttpBackend` class, as described [here](https://github.com/angular/angular/issues/20203#issuecomment-368680437).
+
+```ts
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {HttpBackend, HttpClientModule, HttpClient} from '@angular/common/http';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {AppComponent} from './app';
+
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(httpBackend: HttpBackend) {
+    return new TranslateHttpLoader(new HttpClient(httpBackend));
+}
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpBackend]
+            }
+        })
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
 #### 2. Define the `default language` for the application
 
 ```ts