Open Closed

HttpClient in angular not call HttpInterceptor #3532


User avatar
0
mostafa_ibrahem22@hotmail.com created
  • HttpClient in angular not call HttpInterceptor

import { HttpClient } from '@angular/common/http'; private http: HttpClient this.http.get('https://localhost:44374/api/main-core/country/get-lookup-list').subscribe(r => { debugger; console.log(r); });

I'm use https://www.stimulsoft.com for report, stimulsoft internal use HttpClient, default or custom HttpInterceptors only called by RestService but not called when stimulsoft call API by Httpclient.

I'm try stimulsoft without abp, HttpInterceptors working fine, but inside abp HttpInterceptors not called

  • ABP Framework version: v5.1.3
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes

6 Answer(s)
  • User Avatar
    0
    muhammedaltug created

    Hello,

    The reason for this problem is probably HttpClient imported in lazy load scope. Please define services with @Injectable({providedIn: 'root'}) decorator. And use this service in lazy-loaded components. Do not import HttpClientModule or do not provide HTTP_INTERCEPTORS token in lazy-loaded modules. You can read angular documentation for more information.

  • User Avatar
    0
    mostafa_ibrahem22@hotmail.com created

    Hi,

    why ABP HTTP_INTERCEPTORS does not send an Authorization Bearer token,when use httpclient.

    I only need to any request call by HttpClient or RestService, automatically ApiInterceptor add Authorization Bearer token.

    ApiInterceptor HttpInterceptor use @Injectable({providedIn: 'root'}) decorator, but Authorization Bearer token not added to request

    @Injectable({ providedIn: 'root', }) export class ApiInterceptor implements HttpInterceptor { constructor( private oAuthService: OAuthService, private sessionState: SessionStateService, private httpWaitService: HttpWaitService, @Inject(TENANT_KEY) private tenantKey: string, ) {}

    intercept(request: HttpRequest<any>, next: HttpHandler) { this.httpWaitService.addRequest(request); return next .handle( request.clone({ setHeaders: this.getAdditionalHeaders(request.headers), }), ) .pipe(finalize(() => this.httpWaitService.deleteRequest(request))); }

    getAdditionalHeaders(existingHeaders?: HttpHeaders) { const headers = {} as any;

    const token = this.oAuthService.getAccessToken();
    if (!existingHeaders?.has('Authorization') && token) {
      headers['Authorization'] = `Bearer ${token}`;
    }
    
    const lang = this.sessionState.getLanguage();
    if (!existingHeaders?.has('Accept-Language') && lang) {
      headers['Accept-Language'] = lang;
    }
    
    const tenant = this.sessionState.getTenant();
    if (!existingHeaders?.has(this.tenantKey) && tenant?.id) {
      headers[this.tenantKey] = tenant.id;
    }
    
    return headers;
    

    } }

  • User Avatar
    0
    muhammedaltug created

    Hello

    Can you send an example project? Or can you share your component, your service, and your module which is the component declared?

  • User Avatar
    0
    mostafa_ibrahem22@hotmail.com created

    Hi,

    I made these steps

    abp new Naama.MainCore --template module-pro

    ng generate module components/lookups/countries --module main-core --routing true --route countries --project main-core

    into CountriesComponent, I call same service Url by RestService and HttpClient

    by RestService => ApiInterceptor working by HttpClient => ApiInterceptor not working

    • dev-app
      • main-core Module
        • countries Module
          • CountriesComponent.ts

    this.restService.request&lt;any, any&gt;({ method: 'GET', url: '/api/main-core/country/get-lookup-list' }, { apiName: 'MainCore' }).subscribe(r => {
      debugger;
      console.log(r);
    });
    
    this.http.get('https://localhost:44380/api/main-core/country/get-lookup-list').subscribe(r => {
      debugger;
      console.log(r);
    });
    
  • User Avatar
    0
    muhammedaltug created

    Hello,

    Did you import SharedModule to CountryModule? If you imported, please add the following provider to SharedModule's providers array.

    import {ApiInterceptor} from '@abp/ng.core';
    import {NgModule} from '@angular/core';
    import {HTTP_INTERCEPTORS} from "@angular/common/http";
    
    @NgModule({
      declarations: [],
      imports: [/* imports */],
      exports: [/* exports */],
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          multi: true,
          useClass: ApiInterceptor
        }
      ]
    })
    export class SharedModule {}
    

    Reason for this behavior SharedModule which exists in ABP templates imports CoreModule. CoreModule imports HttpClientModule. In this way, HttpClient has a different instance in lazy-loaded DI Context. We will consider about add this provider to SharedModule.

  • User Avatar
    0
    mostafa_ibrahem22@hotmail.com created

    Hi,

    Thanks for support muhammedaltug

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11