Ionic 2.0 - Add plugins to app module - invalid syntax?

Question

I am attempting to add the Geolocation Ionic native plugin to my Ionic 2.0 application.

As per the instructions here, I have imported the geolocation plugin and I am attempting to add it to the ‘providers’ array on my AppModule decorator, but I am getting a syntax error:

import { Geolocation } from '@ionic-native/geolocation';
...

@NgModule({
  declarations: [
    MyApp,
    BasketPage,
    AccountPage,
    AccountCreationPage,
    CategoriesPage,
    TabsPage,
    LandingPage,
    CategoryPage,
    ProductPage
  ],
  imports: [
      IonicModule.forRoot(MyApp),
      HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    BasketPage,
    AccountPage,
    AccountCreationPage,
    CategoriesPage,
    TabsPage,
    LandingPage,
    CategoryPage,
    ProductPage
  ],
  providers: [
      Geolocation,
      { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

The providers array seems to only accept an object with the ‘provide’ and ‘useClass’ properties, so adding the Geolocation object didn’t work.

Also, if you check the Ionic documentation, the providers array looks different to mine? Why is that? When I checked the Ionic documentation, there are only two versions - v1 and ‘latest’.

What am I doing wrong here?

The error message I get when the task runner is building the app is as follows (although Visual Studio highlights in red the syntax error anyway):

12:56:37] typescript: …rce/Repos/Aise/Aise/AiseMobile/node_modules/@ionic-native/geolocation/index.d.ts, line: 127 Type ‘any’ is not a constructor function type. L127: export declare class Geolocation extends IonicNativePlugin {

For reference, here is the output from the ionic info command:

cli packages: (C:\Users\ciara\Source\Repos\Aise\Aise\AiseMobile\node_modules)

@ionic/cli-utils : 1.9.2 ionic (Ionic CLI) : 3.9.2 global packages:

Cordova CLI : 7.0.1 local packages:

@ionic/app-scripts : 1.1.0 Cordova Platforms : android 6.2.3 Ionic Framework : ionic-angular 2.0.1 System:

Android SDK Tools : 25.2.3 Node : v6.10.3 npm
: 3.10.10 OS : Windows 10

My package.json:

{
  "name": "io.cordova.myappeaf9db",
  "author": "",
  "homepage": "",
  "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",
    "watch": "ionic-app-scripts watch"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic-native/geolocation": "^4.2.1",
    "@ionic/storage": "1.1.7",
    "cordova-android": "^6.2.3",
    "cordova-plugin-compat": "^1.0.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.1",
    "cordova-plugin-whitelist": "1.3.1",
    "ionic-angular": "2.0.1",
    "ionic-native": "2.4.1",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "jsonpath": "0.2.12",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.0",
    "@ionic/cli-plugin-ionic-angular": "1.2.0",
    "typescript": "2.0.9"
  },
  "description": "Ionic2Tabs: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "-vs-binding": {
    "BeforeBuild": [
      "ionic:build"
    ],
    "ProjectOpened": [
      "watch"
    ]
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-geolocation": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Answer 1

If you plan on using ionic-native 2.x, you dont need to install ionic-native/<pluginName> package.

In the 2.x version all native plugin wrappers are included in the single core package. Also all plugin types are global and static.

In your case the usage is

import { Geolocation } from ionic-native // import

//To access the functions,

Geolocation.functionName()

You can uninstall the ionic-native/Geolocation package.
You also do not have to set provider in AppModule or inject in constructor.