Ionic-native: Ionic native 5.0.0 beta error: Uncaught TypeError: Object(...) is not a function

[duyetnk]

i create new project with ionic 4 beta,
i migrated my app from ionic 3 to 4 successfully,
but when i run "ionic serve" this error is occurs:

when click to "index.js:107" it show like this

it come from ../node_modules/@ionic-native/stripe/index.js
if i disable stripe plugin, another native plugin get the similar error
i dont know how to fix this
i think it is Ionic native error.
Do you guy have any idea?

[lpusz]

To use a plugin, import and add the plugin injectable to a @NgModule. For Angular, the import path should end with /ngx

Check your import path. I had that error before updating @ionic-native/camera to 5.0.0-beta.14 (default version for CLI is 4.x).

[duyetnk]

why didn't i see it in beta.ionicframework docs ?
anyway, thanks you. :))

[duyetnk]

after add "/ngx" to the end of import path, i face this error:
error ts2307: cannot find module '@ionic-native/stripe/ngx'
My ionic 3 app run fine, after i migrate to ionic 4, it not working.
Do i miss somthing??

[danielsogl]

Are you sure you installed the latest @beta release? Also Import the Plugin in the app.module.ts

[duyetnk]

yes, i installed the lastest @beta just few days ago,
and i imported plugin in the app.module.ts
here is my 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 { Stripe } from '@ionic-native/stripe/ngx';
import { Camera } from '@ionic-native/camera/ngx';
import { File } from '@ionic-native/file/ngx';
import { FileTransfer} from '@ionic-native/file-transfer/ngx';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { Diagnostic } from '@ionic-native/diagnostic/ngx';
import { BackgroundMode } from '@ionic-native/background-mode/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ActivitiesComponent } from './components/activities/activities.component';
import { FormInfoComponent } from './components/form-info/form-info.component';
import { FormStripeComponent } from './components/form-stripe/form-stripe.component';
import { FriendsComponent } from './components/friends/friends.component';
import { LoadingComponent } from './components/loading/loading.component';
import { LoadingTextComponent } from './components/loading-text/loading-text.component';
import { MenuHomeComponent } from './components/menu-home/menu-home.component';
import { MiniCartComponent } from './components/mini-cart/mini-cart.component';
import { NotificationsComponent } from './components/notifications/notifications.component';
import { PlaceholderCardComponent } from './components/placeholder-card/placeholder-card.component';
import { PlaceholderItemComponent } from './components/placeholder-item/placeholder-item.component';
import { ProfileComponent } from './components/profile/profile.component';
import { NumberPipe } from './pipes/number/number.pipe';
import { NumberFormatPipe } from './pipes/number-format/number-format.pipe';
import { StringFilterPipe } from './pipes/string-filter/string-filter.pipe';
import { LanguageFilterPipe } from './pipes/language-filter/language-filter.pipe';

@NgModule({
  declarations: [
  AppComponent,
  ActivitiesComponent,
  FormInfoComponent,
  FormStripeComponent,
  FriendsComponent,
  LoadingComponent,
  LoadingTextComponent,
  MenuHomeComponent,
  MiniCartComponent,
  NotificationsComponent,
  PlaceholderCardComponent,
  PlaceholderItemComponent,
  ProfileComponent,
  NumberPipe,
  NumberFormatPipe,
  StringFilterPipe,
  LanguageFilterPipe
  ],
  entryComponents: [],
  imports: [
  BrowserModule,
  IonicModule.forRoot(),
  AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Stripe,
    Camera,
    File,
    FileTransfer,
    InAppBrowser,
    Geolocation,
    Diagnostic,
    BackgroundMode,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and ionic info

Ionic:

   ionic (Ionic CLI)          : 4.0.1 (C:\Users\naugh\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0

System:

   NodeJS : v8.10.0 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

Environment:

   ANDROID_HOME : not set

[pamerio]

Exactly the same error here: it didn't find the @ionic-native/google-plus/ngx I checked in node_modules\@ionic-native\google-plus\ folder and actually there's no an 'ngx' folder...

[pamerio]

Finally I managed to solve my problem: I have installed the ver. '5.0.0-beta.14' of @ionic-native/google-plus. If this is actually the hack for the issue...well, I suggest to change the doc for the period of beta...

[duyetnk]

ah i see,
status-bar plugin version is "5.0.0-beta.14" too

[jurerick]

I fix mine by installing the beta

npm install --save @ionic-native/file-transfer@beta

then in my app module
import { FileTransfer } from '@ionic-native/file-transfer/ngx';
...
providers: [ FileTransfer,

[DEXTERNATAN]

Personal tip if you are using ionic 4. Use the link below to configure the camera and solve the above problems:

https://beta.ionicframework.com/docs/native/camera

[gidhin]

Im facing white screen in when open the app.

when click to "vendor.js:102989" it show like this

[duyetnk]

can you show app.module.ts

[gidhin]

This is my app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { IonicStorageModule } from '@ionic/storage';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HTTP } from '@ionic-native/http';
import { SpinnerDialog } from '@ionic-native/spinner-dialog';
import { NativeStorage } from '@ionic-native/native-storage';
import { Toast } from '@ionic-native/toast';

//pages
import { LoginPage } from '../pages/login/login';
import { AppDashboardPage } from '../pages/app-dashboard/app-dashboard';
import { SplashScreenPage } from '../pages/splash-screen/splash-screen';
import { UserScreenPage } from '../pages/user-screen/user-screen';
import { AdminPagePage } from '../pages/admin-page/admin-page';
import {HomeuserLoginPagePage} from "../pages/homeuser-login/homeuser-login"
;
import {HomeOperationsPagePage} from
"../pages/home-operations/home-operations";
import {UserRegistrationPagePage} from
"../pages/user-registration/user-registration";

@NgModule({
declarations: [
MyApp,
LoginPage,
AppDashboardPage,
SplashScreenPage,
UserScreenPage,
AdminPagePage,
HomeuserLoginPagePage,
HomeOperationsPagePage,
UserRegistrationPagePage
],
imports: [
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
AppDashboardPage,
SplashScreenPage,
UserScreenPage,
AdminPagePage,
HomeuserLoginPagePage,
HomeOperationsPagePage,
UserRegistrationPagePage

],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},HTTP,SpinnerDialog,
NativeStorage,Toast
]
})
export class AppModule {}

Thanks and Regards,
Gidhin S

On Thu, Feb 14, 2019 at 7:36 AM duyetnk [e-mail] wrote:

can you show app.module.ts

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native/issues/2614#issuecomment-463455963,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AaZN72V1LSl0ogV37SGMDr5OFgRC6WLJks5vNMSQgaJpZM4Vk6CY
.

[duyetnk]

you must add "ngx" in the end of import path of native plugin like this:
import { StatusBar } from '@ionic-native/status-bar/ngx';

[gidhin]

Thank you Duyetnk, I will add and run code get some error. Then i try to
install "npm install @ionic-native/status-bar/*ngx" *then also i get error.
below i have attachment error screen shot.

Thanks and Regards,
Gidhin S

On Thu, Feb 14, 2019 at 10:01 AM duyetnk [e-mail] wrote:

you must add "ngx" in the end of import path of native plugin like this:
import { StatusBar } from '@ionic-native/status-bar/ngx';

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native/issues/2614#issuecomment-463485453,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AaZN744NSsSoFl0qAqN3mRh_qgKtxZHQks5vNOaHgaJpZM4Vk6CY
.

[duyetnk]

i don't see your attachment error screenshot

[gidhin]

@duyetnk here is my attachment of error screenshot

[duyetnk]

you should install plugin without "ngx":
change "npm install @ionic-native/status-bar/ngx"
to "npm install @ionic-native/status-bar"

and in app.module.ts add:
import { StatusBar } from '@ionic-native/status-bar/ngx';

see link: _https://ionicframework.com/docs/native/status-bar_

[gidhin]

@duyetnk I have install statusBar "npm install @ionic-native/[email protected]" then it works,
but got error in splash screen same beta version then it works.

Now it getting error in this place

[danielsogl]

Why do you install the beta version? We released V5 last week.

[gidhin]

@duyetnk Thank you so much I have fixed that issue. I install 5.0.0-beta.14 for all plugin its work for me.

@danielsogl okay can you tell me the stable version for 5.0.0-beta.14.

[danielsogl]

Just run npm install @ionic-native/status-bar as described in the documentation.

[gidhin]

@danielsogl But it didn't work for me.

[danielsogl]

Have you also updated the native/core dependency? Please post your package.json file so I can take a look.

[gidhin]

This is my package.json

{
    "name": "ionic-hello-world",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "2.4.8",
        "@angular/compiler": "2.4.8",
        "@angular/compiler-cli": "2.4.8",
        "@angular/core": "2.4.8",
        "@angular/forms": "2.4.8",
        "@angular/http": "2.4.8",
        "@angular/platform-browser": "2.4.8",
        "@angular/platform-browser-dynamic": "2.4.8",
        "@angular/platform-server": "2.4.8",
        "@ionic-native/action-sheet": "^3.4.4",
        "@ionic-native/core": "^5.0.0-beta.14",
        "@ionic-native/firebase": "^5.0.0-beta.14",
        "@ionic-native/http": "^5.0.0-beta.14",
        "@ionic-native/native-storage": "^5.0.0-beta.14",
        "@ionic-native/spinner-dialog": "^5.0.0-beta.14",
        "@ionic-native/splash-screen": "^5.0.0-beta.14",
        "@ionic-native/status-bar": "^5.0.0-beta.14",
        "@ionic-native/toast": "^5.0.0-beta.14",
        "@ionic/storage": "^2.0.1",
        "cordova-android": "7.1.4",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.1",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-plugin-wkwebview-engine": "git+https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
        "cordova-sqlite-storage": "^2.0.4",
        "cordova-windows": "~4.4.3",
        "ionic-angular": "2.3.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.0.1",
        "sw-toolbox": "3.4.0",
        "zone.js": "0.7.2"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.2.2",
        "typescript": "2.0.9"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [
        "ios",
        {
            "platform": "ios",
            "version": "",
            "locator": "ios"
        }
    ],
    "description": "LDAPP: An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "cordova-plugin-wkwebview-engine": {},
            "cordova-sqlite-storage": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "ios",
            "windows",
            "android"
        ]
    }
}

[danielsogl]

Okay, looks like a "legacy" ionic 2 app.
You have to upgrade all ionic-native related dependencies to there latest releases. You also have to update rxjs to version 6. Because you are on Angular 2 you have to install the rxjs compat dependency.
I would recommend you to upgrade to Ionic 4 or 3 if it's possible. I wrote a guide here on how to do that.

[gidhin]

Thanks you. I will update and check.

Thanks and Regards,
Gidhin S

On Thu, Feb 14, 2019 at 7:08 PM Daniel Sogl [e-mail]
wrote:

Okay, looks like a "legacy" ionic 2 app.
You have to upgrade all ionic-native related dependencies to there latest
releases. You also have to update rxjs to version 6. Because you are on
Angular 2 you have to install the rxjs compat dependency.
I would recommend you to upgrade to Ionic 4 or 3 if it's possible. I wrote
a guide here
https://forum.ionicframework.com/t/guide-how-to-update-to-ionic-3-x/87516on
how to do that.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native/issues/2614#issuecomment-463629659,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AaZN73MoA0QXPQ1b2Aw21zF-8WJd2GlFks5vNWbhgaJpZM4Vk6CY
.

[jhgeluk]

I have a similar issue with another plugin

[gidhin]

@SaltyPotato what is exact issue so that we find solution sooner.

[jhgeluk]

@gidhin Using the BackgroundGeolocation plugin I get the same error

[gidhin]

@SaltyPotato. if you using the ionic 4 then BackgroundGeolocation plugin should be version 5+.
and import the plugin in app.module example "import { Toast } from '@ionic-native/toast/ngx';" see the example you should to get from /ngx. I hope it will work. Thank you.

[Sunny41]

this is kinda buggy. i had this issue myself with the in-app-browser plugin.
i needed to make sure that all of my cordova plugins have the same version. an then, the cli promted, that i am missing @angular/common. so i did: npm i @angular/common. then, the cli prompdet, that i am missing more modules and i installed them just like i did it with @angular/common.
this fixed it.
my plugins ar now all on 5.0.0-beta.14 ist this still the latest version?
thank you!
this is the first time stack overflow doesnt help but github does for me <3