Issue in setting the header using HttpInterceptor

Question

I have the following code:

// config.service.ts
import { Injectable } from "@angular/core";

@Injectable()
export class ConfigService {
  private language: string = "en";
  constructor() {}
  set Language(lang: string) {
    this.language = lang;
  }
  get Language(): string {
    return this.language;
  }
}

// app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, APP_INITIALIZER } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

import { AnalyticsService, CoreModule, CrossDomainService } from "./core";
import { TileModule } from "./tile/tile.module";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, TileModule, CoreModule.forRoot()],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: onModuleInit,
      multi: true,
      deps: [CrossDomainService, AnalyticsService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

export function onModuleInit(
  crossDomainService: CrossDomainService,
  analyticsService: AnalyticsService
) {
  return () => {
    console.log("App Init");
    crossDomainService.init();
    analyticsService.init();
    return new Promise(resolve => resolve(true));
  };
}

//core.module.ts
import { NgModule, ModuleWithProviders } from "@angular/core";
import { CommonModule } from "@angular/common";
import {
  HTTP_INTERCEPTORS,
  HttpClientModule,
  HttpClient
} from "@angular/common/http";

import { HttpRequestInterceptor } from "./http-request.interceptor";
import { ArticleService } from "./article.service";
import { CrossDomainService } from "./cross-domain.service";
import { AnalyticsService } from "./analytics.service";

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { ConfigService } from "../config.service";

export function translateHttpLoaderFactory(http: HttpClient) {
  //return new TranslateHttpLoader(http);
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    ArticleService,
    CrossDomainService,
    AnalyticsService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpRequestInterceptor,
      multi: true
    }
  ]
})
export class CoreModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [ConfigService]
    };
  }
}

//http-request.interceptor.ts
import { Injectable } from "@angular/core";
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest
} from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import { ConfigService } from "../config.service";

@Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {
  language: string = "en";
   constructor(private config: ConfigService) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {    
    const request = req.clone({
      setHeaders: { "Accept-Language": this.config.Language }
    });
    console.log(
      `Request header value : ${request.headers.get("Accept-Language")}`
    );

    return next.handle(request);
  }
}

CrossDomainService, in this case is used to get the language from an external system. It is a connector between the application and the external services.

The external framework in this example is going to supply the language to the Sample Angular application. Assume that the initial value of the language is 'en' and now if we update it to 'es' I see that HttpRequestInterceptor is first picking en and then es. So all the API requests take 'Accept-Language' header value as en instead of es. If the external framework is sending language 'fr' then in this case I see the HttpRequestInterceptor is first picking es and then fr. Hence there will be few API requests taking 'Accept-Language' header value as es instead of fr.

Can anyone help me to know how to fix this issue?

Farhat Zaman · Accepted Answer · 2018-12-11 10:38:26Z

2

try to replace setheaders with headers like this.

const request = req.clone({headers: req.headers.set('Accept-Language',this.config.Language)});

answered Dec 11, 2018 at 10:38

Farhat Zaman

1,37910 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

santosh kumar patro Over a year ago

Thanks Farhat for your response. I tried the above but no change in the response. I still see the same error.

santosh kumar patro Over a year ago

I see that even though the external framework sends a different language from the one that was set initially the code: console.log( Request header value : ${request.headers.get("Accept-Language")} ); picks the old language only.

Alex Denor · Accepted Answer · 2021-02-23 08:24:50Z

0

I know this is an old question, but in case of anyone struggling with setting the 'Accept-Language' header to all request in an interceptor, use this:

request = request.clone({
  setHeaders: {
    'Accept-Language': this.config.Language + ';q=0.9,en-US,en;q=0.8'
  }
});

This works on Angular 11.2.

answered Feb 23, 2021 at 8:24

Alex Denor

1374 silver badges18 bronze badges

Collectives™ on Stack Overflow

Issue in setting the header using HttpInterceptor

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related