Ionic-framework: ionic 4: Blank screen in simulator when using http-native

Created on 23 May 2018 · 18Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[x] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
I'm getting a blank screen when I try to use the http-native.

Expected behavior:
The App should launch properly

Steps to reproduce:

Create a new ionic 4 project, ex: tabs
Follow the steps to add cordova-plugin-advanced-http described here: https://ionicframework.com/docs/native/http/
Launch the app in the simulator: ionic cordova emulate ios -lc
Result: blank screen

Error in Safari console:
TypeError: Object(_ionic_native_core__WEBPACK_IMPORTED_MODULE_1__["Cordova"]) is not a function. (In 'Object(_ionic_native_core__WEBPACK_IMPORTED_MODULE_1__["Cordova"])({ sync: true })', 'Object(_ionic_native_core__WEBPACK_IMPORTED_MODULE_1__["Cordova"])' is an instance of Object)

Related code:

``
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { HTTP } from '@ionic-native/http';

@Component({
selector: 'app-page-about',
templateUrl: 'about.page.html',
styleUrls: ['about.page.scss']
})
export class AboutPage {

constructor(
private http: HTTP,
private platform: Platform,
) {

console.log('### 1 Vai chamar...');
this.platform.ready().then(() => {
  console.log('### 2 chamou!');
  this.http.get('http://ionic.io', {}, {})
  .then(data => {
    console.log('### 3 resultado:');
    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);
  })
  .catch(error => {
    console.log('### 4 babou!');
    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);
  });
});

}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

li packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

global packages:

   cordova (Cordova CLI) : 8.0.0

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.1
   @ionic/schematics-angular  : 1.0.0-rc.6
   Cordova Platforms          : ios 4.5.4
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   Android SDK Tools : 25.2.5
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v8.11.2
   npm               : 5.6.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.3.1 Build version 9E501

Environment Variables:

   ANDROID_HOME : /usr/local/opt/android-sdk

triage

Source

wilsolutions

👍1

Most helpful comment

try using the ngx on all of the imports and make sure you are using beta versions

import { Camera } from '@ionic-native/camera/ngx';

    "@ionic-native/camera": "^5.0.0-beta.15",
    "@ionic-native/core": "^5.0.0-beta.17",

aaronksaunders on 11 Sep 2018

👍4

All 18 comments

Was this resolved yet? I only receive this error when i use ionic-native/google-plus. When i add google-plus to the constructor i get the same error.
Info:
@ionic/cli-utils : 2.0.0-rc.6
ionic (Ionic CLI) : 4.0.0-rc.6

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@angular-devkit/core : 0.6.0
@angular-devkit/schematics : 0.6.0
@angular/cli : 6.0.1
@ionic/schematics-angular : 1.0.0-rc.6
Cordova Platforms : android 7.0.0
Ionic Framework : @ionic/angular 4.0.0-alpha.7

System:

Android SDK Tools : 26.1.1
NodeJS : v8.9.4
npm : 6.1.0
OS : Windows 10

ksummersill on 30 May 2018

@wilsolutions
Please add the HTTP in appModule provider...

ravi-pandit14 on 22 Aug 2018

same issue, adding http to provider still show same error

wesleyxiao on 24 Aug 2018

Uncaught TypeError: Object(...) is not a function

this plugin doesn't have /ngx folder so nothing works. Even Not using but importing makes cause like import { HTTP } from '@ionic-native/http';

ugurozturk on 26 Aug 2018

👍1

Hi,
I have the same issues importing Ionic Firebase....

The project run fine when is empty (no plugin installed)

then just added ionic firebase and I have the same issues.

TypeError: Object(_ionic_native_core__WEBPACK_IMPORTED_MODULE_1__["Cordova"]) is not a function. (In 'Object(_ionic_native_core__WEBPACK_IMPORTED_MODULE_1__["Cordova"])()', 'Object(_ionic_native_core__WEBPACK_IMPORTED_MODULE_1__["Cordova"])' is an instance of Object)

On Chrome the error in console is:

index.js:530 Uncaught TypeError: Object(...) is not a function at index.js:530 at Object../node_modules/@ionic-native/firebase/index.js (index.js:747) at __webpack_require__ (bootstrap:81) at Object../src/app/app.module.ts (app.component.ts:11) at __webpack_require__ (bootstrap:81) at Object../src/main.ts (environment.ts:15) at __webpack_require__ (bootstrap:81) at Object.0 (main.ts:12) at __webpack_require__ (bootstrap:81) at checkDeferredModules (bootstrap:43)

My Ionic info are:

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/......./Library/Android/sdk)
   ios-deploy        : 2.0.0
   ios-sim           : 7.0.0
   NodeJS            : v8.11.4 (/usr/local/bin/node)
   npm               : 6.4.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

icchio on 28 Aug 2018

I'm getting this error on ionic-native/facebook as well, looking into a solution... Hopefully I won't have to switch back to Ionic v3.

linuxs on 30 Aug 2018

Well I've actually made some progress somehow in the past 6 minutes. Here's what I've discovered thus far:

Upgrading your package.json to be at least 5.0.0-beta.14 on packages like @ionic-native/facebook for example does resolve the error of including it in the file, and removes the Cordova undefined error.

However now I am getting a new error when attempting to pass the provider to the controllers constructor.

Error: Uncaught (in promise): Error: Can't resolve all parameters for HomePage: ([object Object], ?). syntaxError

Will update if I am able to resolve this, I also install ionic-native/core just to be safe incase that makes a difference, and upgraded Cordova to the latest versions.

Example of constructor:
constructor( private animationBuilder: AnimationBuilder, private fb: Facebook ){ }

linuxs on 30 Aug 2018

Alright I was able to resolve @ionic-native/facebook based on the following documentation. I'll also provide copies of my app.module.ts, home.page.ts, and package.json files. Please ask me any questions if you have them, and I'll see what I can help with.

App.module.ts:

`import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { Facebook } from '@ionic-native/facebook/ngx';

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
Facebook
],
bootstrap: [AppComponent]
})
export class AppModule {}`

Home.page.ts
`import { Component, ViewChild, ElementRef } from '@angular/core';
import { trigger, state, style, transition, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
@ViewChild('fadeIn') elementRef: ElementRef;
private player: AnimationPlayer;

constructor(
    private animationBuilder: AnimationBuilder,
    private fb: Facebook
){ }

ngAfterContentInit(){
    let self = this;
    setTimeout(function(){ self.startAnimation(); }, 500);
    // this.startAnimation();
}

startAnimation(){
    if (this.player){
        this.player.destroy();
    }

    let animationFactory;

    animationFactory = this.animationBuilder.build([
        style({ opacity: 0 }),
        animate(200, style({ opacity: 1 }))
    ]);

    this.player = animationFactory.create(this.elementRef.nativeElement);
    this.player.play();
}

loginWithFacebook(){
    this.fb.login(['email', 'public_profile', 'profile_photo'])
        .then(
            (res: FacebookLoginResponse) => {
                console.log(JSON.stringify(res));
            })
        .catch(e => {
            console.error(e);
        });
}

loginWithGoogle(){

}

}
`

Package.json
{ "name": "CENSORED", "version": "0.0.1", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^6.1.3", "@angular/common": "~6.1.1", "@angular/core": "~6.1.1", "@angular/forms": "~6.1.1", "@angular/http": "~6.1.1", "@angular/platform-browser": "^6.1.3", "@angular/platform-browser-dynamic": "~6.1.1", "@angular/router": "~6.1.1", "@ionic-native/core": "^5.0.0-beta.15", "@ionic-native/facebook": "^5.0.0-beta.15", "@ionic-native/splash-screen": "5.0.0-beta.14", "@ionic-native/status-bar": "5.0.0-beta.14", "@ionic/angular": "^4.0.0-beta.6", "cordova-ios": "4.5.5", "cordova-plugin-device": "^2.0.2", "cordova-plugin-facebook4": "^2.3.0", "cordova-plugin-ionic-keyboard": "^2.1.2", "cordova-plugin-ionic-webview": "^2.1.0", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-whitelist": "^1.3.3", "core-js": "^2.5.3", "rxjs": "6.2.2", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/architect": "~0.7.2", "@angular-devkit/build-angular": "~0.7.2", "@angular-devkit/core": "~0.7.2", "@angular-devkit/schematics": "~0.7.2", "@angular/cli": "6.1.5", "@angular/compiler": "~6.1.1", "@angular/compiler-cli": "~6.1.1", "@angular/language-service": "~6.1.1", "@ionic/ng-toolkit": "^1.0.0", "@ionic/schematics-angular": "^1.0.0", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~10.7.1", "codelyzer": "~4.4.2", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~2.7.2" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-facebook4": { "APP_ID": "CENSORED", "APP_NAME": "CENSORED" }, "cordova-plugin-whitelist": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": {}, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-statusbar": {} }, "platforms": [ "ios" ] } }

TL;DR:

Upgrade package.json to reflect beta ionic-native packages, and use ngx folder when including providers.

linuxs on 30 Aug 2018

Now I've got an issue where it's almost as if Cordova.js is not being loaded, but from what I've been reading that could be an active bug with Ionic's Livereloading running on the emulator not including the file or something.

Going to try it without live reload and see what happens, will update.

linuxs on 30 Aug 2018

Alright, I was able to resolve this issue entirely for my codebase. I'll post a gist in a few hours containing a sample fix, it might not work for all ionic native packages however. Basically they require the beta build of each ionic native module, and must load it into the App Module as an import.

Oh, and use the /ngx folder instead of just the module name.

linuxs on 30 Aug 2018

Did you post the gist? I'm having the same problem.

bandodebits on 31 Aug 2018

😕1

No I didn't get a chance to. I'll create a sample Github repo you can fork. What plugin specifically are you having trouble with?

linuxs on 4 Sep 2018

NFC, Facebook, BarcodeScanner. Basically all the plugins I need. The error is the same:
TypeError: Object(_ionic_native_core__WEBPACK_IMPORTED_MODULE_1__["Cordova"]) is not a function. (In 'Object(_ionic_native_core__WEBPACK_IMPORTED_MODULE_1__["Cordova"])()', 'Object(_ionic_native_core__WEBPACK_IMPORTED_MODULE_1__["Cordova"])' is an instance of Object)

bandodebits on 6 Sep 2018

I'm using Capacitor, but I also tried with Cordova and got the same error.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

import { NFC, Ndef, NfcUtil } from '@ionic-native/nfc';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    NFC,
    Facebook,
    BarcodeScanner,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

{
  "name": "app-beta",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^6.1.6",
    "@angular/core": "^6.1.6",
    "@angular/forms": "^6.1.6",
    "@angular/http": "^6.1.6",
    "@angular/platform-browser": "^6.1.6",
    "@angular/platform-browser-dynamic": "^6.1.6",
    "@angular/router": "^6.1.6",
    "@capacitor/android": "^1.0.0-beta.7",
    "@capacitor/cli": "^1.0.0-beta.7",
    "@capacitor/core": "^1.0.0-beta.7",
    "@capacitor/ios": "^1.0.0-beta.7",
    "@ionic-native/barcode-scanner": "^4.12.2",
    "@ionic-native/core": "5.0.0-beta.15",
    "@ionic-native/facebook": "^4.12.2",
    "@ionic-native/nfc": "^4.12.2",
    "@ionic-native/splash-screen": "5.0.0-beta.15",
    "@ionic-native/status-bar": "5.0.0-beta.15",
    "@ionic/angular": "^4.0.0-beta.7",
    "cordova-plugin-facebook4": "^2.3.0",
    "core-js": "^2.5.3",
    "phonegap-nfc": "^1.0.3",
    "phonegap-plugin-barcodescanner": "^8.0.0",
    "rxjs": "^6.3.1",
    "rxjs-compat": "^6.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.7.2",
    "@angular-devkit/build-angular": "~0.7.2",
    "@angular-devkit/core": "~0.7.2",
    "@angular-devkit/schematics": "~0.7.2",
    "@angular/cli": "6.1.5",
    "@angular/compiler": "^6.1.6",
    "@angular/compiler-cli": "^6.1.6",
    "@angular/language-service": "^6.1.6",
    "@ionic/ng-toolkit": "^1.0.0",
    "@ionic/schematics-angular": "^1.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.9.4",
    "codelyzer": "~4.4.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.3",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  },
  "description": "An Ionic project"
}

bandodebits on 6 Sep 2018

try using the ngx on all of the imports and make sure you are using beta versions

import { Camera } from '@ionic-native/camera/ngx';

    "@ionic-native/camera": "^5.0.0-beta.15",
    "@ionic-native/core": "^5.0.0-beta.17",

aaronksaunders on 11 Sep 2018

👍4

Also another important thing is to import them as a provider in Angular modules before using them in the app

moscoso on 14 Sep 2018

This is related to Cordova Plugin / Ionic Native, so I close this here. If you need support, please use the ionic support forum

paulstelzer on 3 Dec 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.