How can I use cordova device ready function inside http interceptor

Question

I'm converting my angular 8 application to android application. In android application I can't use 'ngx-cookie-service' so I have to use cordova-plugin-cookiemaster. So I need to know which platform I'm using inside my http interceptor so then I can decide should I use ngx-cookie-service or cordova-plugin-cookiemaster. Here is my interceptor code

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CookieService } from 'ngx-cookie-service';
import { environment } from '../../../environments/environment';
declare var cookieMaster;

@Injectable()
export class Interceptor implements HttpInterceptor {
  device = {};
  domain = environment.domain;
  constructor(
    private cookieService: CookieService,
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let token = '';
    token = this.cookieService.get('tolotoken');
    console.log(this.getCookie());
    // if (this.device['platform'] === 'Android') {
    //   this.getCookie();
    // } else {
    // }
    if (token) {
      request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) });
    }
    if (!request.headers.has('Content-Type')) {
      request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
    }
    request = request.clone({ headers: request.headers.set('Accept', 'application/json') });
    return next.handle(request).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
        }
        return event;
      }));
  }

  getCookie() {
    cookieMaster.getCookieValue(this.domain, 'tolotoken', (data) => {
      console.log(data);
    }, (error) => {
      if (error) {
        console.log('error: ' + error);
      }
    });
  }
}

And I have written cordova-device-ready in service

import { Injectable, OnInit } from '@angular/core';
declare var device;

@Injectable({
  providedIn: 'root'
})
export class UtilityService implements OnInit {
  _device = {};
  constructor() { }

  ngOnInit() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
  }
  onDeviceReady() {
    this._device = device;
    console.log(device);
  }
  getDevice() {
    return this._device;
  }

}

And I have tried to use this service inside Http-interceptor by injecting the utility service, but it didn't worked device is always empty. Is there any work around to find device information? Or any other ideas to decide which cookie service to be used? Thank you.

Answer 1

Just use @angular/cdk/platform

import { Platform } from "@angular/cdk/platform";
...
constructor(private platform:Platform){}
...
if(this.platform.ANDROID){
//call your cookie method
}

And if you need more ondeviceready functionality, just add this to your main.ts (if you are using cordova for example)

const bootstrap = () => {
  platformBrowserDynamic().bootstrapModule(AppModule);
};

if (typeof window["cordova"] !== "undefined") {
  document.addEventListener(
    "deviceready",
    () => {
      bootstrap();
    },
    false
  );
} else {
  bootstrap();
}

More infos on that: https://material.angular.io/cdk/platform/api