Add plugins to app module - invalid syntax?

Ionic Native
1

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 about Ionic 2? I’m so confused.

What am I doing wrong here?

2

Please link to the documentation you are talking about.
Please post the error message you are getting.
Please post your ionic info output.

1 Like
3

Hi Sujan,

The documentation I am referring to is here: https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module

The error message from the task runner is as follows:

[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 {

When I run the ionic info command, I get the following output:

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

Thank you.

4

This is ancient, you should update it. (Note the breaking changes for 2.x in the changelog)

Post your package.json content please.

5

{
“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”
]
}
}

Thanks

6

These two don’t work together. Generate a project with ionic start blank blank and look at the generated package.json file to learn how it should like with recent versions of Ionic Native.

7

Hi Sujan,

It sounds like I should make the jump to Ionic 3.0, would you agree?

The thing which concerns me though is that Ionic 3.0 uses Angular 4, right? Does that mean my existing Angular 2.0 code will have to be modified if I attempt to copy across pages from my existing Ionic 2.0 project to an Ionic 3.0 project?

Thank you so much for your help :slight_smile:

8

Updating everything by copying over might be a good idea if it is not too much.

Nah, there shouldn’t be too much to adapt. If there is, you will get quite clear and googleable error messages. Version numbers for Angular and Ionic are pretty “soft” since 2.x meaning that only minor stuff was changed, but the serious interpretation of SemVer makes MAJOR version number bumps necessary (and Angular also bumps just for fun after some time…)

1 Like