Nativescript HTTP is blocking main thread

android

#1

Nativescript HTTP is blocking main thread.

My imports:

[
NativeScriptModule,
NativeScriptHttpModule,
NativeScriptHttpClientModule,
NativeScriptRouterModule,
]

I find out that by using HTTP Module from https://docs.nativescript.org/angular/ng-framework-modules/http. In android, view will skip frame (due to main thread block) during http request (a request lasts for 1-2 secs). If I replace the http request with setTimeOut, then view will perform smoothly.

console would display warning like:
ActivityManager: Broadcast: Intent { act=DEBUG_SKIP_FRAME_REPORT flg=0x30 FromType=0xffffffff mCallingUid=10149 } ordered=false userid=0 callerApp=ProcessRecord{7df26d9 31062:com.island68.MapleAndroid/u0a149, isShadow:false}

My package.json:

 "dependencies": {
    "@angular/animations": "~6.0.6",
    "@angular/common": "~6.0.6",
    "@angular/compiler": "~6.0.6",
    "@angular/core": "~6.0.6",
    "@angular/forms": "~6.0.6",
    "@angular/http": "~6.0.6",
    "@angular/platform-browser": "~6.0.6",
    "@angular/platform-browser-dynamic": "~6.0.6",
    "@angular/router": "~6.0.6",
    "class-transformer": "^0.1.9",
    "moment-mini-ts": "^2.20.1",
    "nativescript-angular": "~6.0.6",
    "nativescript-background-http": "^3.2.7",
    "nativescript-fresco": "^4.0.0",
    "nativescript-ng-shadow": "^2.1.0",
    "nativescript-pager": "^8.0.2",
    "nativescript-photoviewer": "1.4.0",
    "nativescript-secure-storage": "^2.3.0",
    "nativescript-sqlite": "^2.2.1",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-listview": "3.5.9",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~6.1.0",
    "tns-core-modules": "4.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~6.1.0-beta.3",
    "@ngtools/webpack": "6.1.0-rc.0",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "codelyzer": "~4.3.0",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "~1.6.0",
    "nativescript-dev-typescript": "~0.7.0",
    "nativescript-dev-webpack": "^0.14.4",
    "tslint": "~5.10.0",
    "typescript": "~2.7.2"
  },

my tns --version: 4.1.2


#2

You may checkout the source code, NativeScript uses processes a Http request inside AsyncTask which happens on separate thread.


#3

Hi, I tracked back to the source code.
However, I found out that in the module


NativeScript still calling angular/http besides local file system call. Could you enlighten me which module has AsyncTask wrapped so that I can debug deeper

Thanks!


#4

Angular internally uses XMLHttpRequest only which is mapped to the native Http module whenever you want to hit a remote server.


#5

Hi, after testing and debugging, I found out the lag was due to long time execution of class-transformer:

import { plainToClass } from “class-transformer”

sorry for all the troubles