title: Typescript error while implementing ionic's native HTTP interceptor
body: <p>I was modifying already working Angular 10 web-app into ionic native app, when I got some CORS issues. As I couldn't change anything on BE, I came across native-HTTP plugin Ionic has.</p>
  <p>I followed Angular's instructions on <a href="https://angular.io/guide/http#intercepting-requests-and-responses" rel="nofollow noreferrer">how to make an interceptor</a> and this article that explains <a href="https://manuel-heidrich.dev/blog/an-elegant-way-to-handle-native-http-requests-with-cordova-advanced-http-in-an-ionic-app/" rel="nofollow noreferrer">how to implement both HttpClient and Ionic's native HTTP</a>, but I run into new issues.</p>
  <p>Using the code from article, TS is complaining about this line:</p>
  <p><code>headers: nativeHttpResponse.headers</code></p>
  <pre><code>(property) headers?: HttpHeaders
  Type '{ [key: string]: string; }' is missing the following properties from type 'HttpHeaders': headers, normalizedNames, lazyInit, lazyUpdate, and 12 more.ts(2740)
  http.d.ts(3406, 9): The expected type comes from property 'headers' which is declared here on type '{ body?: any; headers?: HttpHeaders; status?: number; statusText?: string; url?: string; }'
  </code></pre>
  <p>Here's the whole native-http.interceptor.ts:</p>
  <pre><code>import { Injectable } from &quot;@angular/core&quot;;
  import {
    HttpInterceptor,
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpResponse,
  } from &quot;@angular/common/http&quot;;
  import { Observable, from } from &quot;rxjs&quot;;
  import { Platform } from &quot;@ionic/angular&quot;;
  import { HTTP } from &quot;@ionic-native/http/ngx&quot;;
  
  type HttpMethod =
    | &quot;get&quot;
    | &quot;post&quot;
    | &quot;put&quot;
    | &quot;patch&quot;
    | &quot;head&quot;
    | &quot;delete&quot;
    | &quot;upload&quot;
    | &quot;download&quot;;
  
  @Injectable()
  export class NativeHttpInterceptor implements HttpInterceptor {
    constructor(private nativeHttp: HTTP, private platform: Platform) {}
  
    public intercept(
      request: HttpRequest&lt;any&gt;,
      next: HttpHandler
    ): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      if (!this.platform.is(&quot;cordova&quot;)) {
        return next.handle(request);
      }
  
      return from(this.handleNativeRequest(request));
    }
  
    private async handleNativeRequest(
      request: HttpRequest&lt;any&gt;
    ): Promise&lt;HttpResponse&lt;any&gt;&gt; {
      const headerKeys = request.headers.keys();
      const headers = {};
  
      headerKeys.forEach((key) =&gt; {
        headers[key] = request.headers.get(key);
      });
  
      try {
        await this.platform.ready();
  
        const method = &lt;HttpMethod&gt;request.method.toLowerCase();
  
        // console.log(‘— Request url’);
        // console.log(request.url)
        // console.log(‘— Request body’);
        // console.log(request.body);
  
        const nativeHttpResponse = await this.nativeHttp.sendRequest(
          request.url,
          {
            method: method,
            data: request.body,
            headers: headers,
            serializer: &quot;json&quot;,
          }
        );
  
        let body;
  
        try {
          body = JSON.parse(nativeHttpResponse.data);
        } catch (error) {
          body = { response: nativeHttpResponse.data };
        }
  
        const response = new HttpResponse({
          body: body,
          status: nativeHttpResponse.status,
          headers: nativeHttpResponse.headers,  &lt;--------
          url: nativeHttpResponse.url,
        });
  
        // console.log(‘— Response success’)
        // console.log(response);
  
        return Promise.resolve(response);
      } catch (error) {
        if (!error.status) {
          return Promise.reject(error);
        }
  
        const response = new HttpResponse({
          body: JSON.parse(error.error),
          status: error.status,
          headers: error.headers,
          url: error.url,
        });
  
        return Promise.reject(response);
      }
    }
  }
  </code></pre>
  <p>Here's how my <code>app.module.ts</code> looks like:</p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { IonicModule } from '@ionic/angular';
  import { HTTP } from '@ionic-native/http/ngx';
  
  import { CoreModule } from './core/core.module';
  import { SharedModule } from './shared/shared.module';
  import { AppComponent } from './app.component';
  import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';
  import { appRoutes } from './app.routes';
  
  
  @NgModule({
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      ReactiveFormsModule,
      SharedModule,
      CoreModule,
      RouterModule.forRoot(
        appRoutes
      ),
      IonicModule.forRoot()
    ],
    providers: [HTTP],
    declarations: [
      AppComponent,
      PageNotFoundComponent
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>Andd here is how my <code>core.module.ts</code> (where I want to use interceptor) looks like:</p>
  <pre><code>import { NgModule } from &quot;@angular/core&quot;;
  import { CommonModule } from &quot;@angular/common&quot;;
  import { HTTP_INTERCEPTORS, HttpClientModule } from &quot;@angular/common/http&quot;;
  
  import { NativeHttpInterceptor } from &quot;./service/native-http.interceptor&quot;;
  import { AuthService } from &quot;./service/auth.service&quot;;
  import { ApiService } from &quot;./service/api.service&quot;;
  import { AuthGuardService } from &quot;./service/auth-guard.service&quot;;
  import { AuthInterceptor } from &quot;./service/auth-interceptor&quot;;
  import { WindowRef } from &quot;./service/window-ref-service&quot;;
  
  @NgModule({
    imports: [CommonModule, HttpClientModule],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: NativeHttpInterceptor,
        multi: true,
      },
      AuthService,
      ApiService,
      AuthGuardService,
      WindowRef,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthInterceptor,
        multi: true,
      },
    ],
  })
  export class CoreModule {}
  </code></pre>