Ionic-native: @ionic-native/contacts@beta not working with Ionic 4 Upgrade.

[chandansutradhar2]

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:
After adding Contacts native plugin, ng serve of ionic 4 cli generates the following error.

ERROR in ./node_modules/@ionic-native/contacts/ngx/index.js
[ng] Module parse failed: Identifier 'checkAvailability' has already been declared (17:128)
[ng] You may need an appropriate loader to handle this file type.
[ng] | return c > 3 && r && Object.defineProperty(target, key, r), r;
[ng] | };
[ng] | import { IonicNativePlugin, checkAvailability, cordovaInstance, instanceAvailability, instancePropertyGet, instancePropertySet, checkAvailability, getPromise } from '@ionic-native/core';
[ng] | var Contact = /** @class */ (function () {
[ng] | function Contact() {
[ng] i ｢wdm｣: Failed to compile.

• The error occurs only after addition of contacts plugin, since i also installed camera plugin and it compile successfully.

Expected behavior:
Should compile without any error.

Steps to reproduce:
1 create a new blank ionic 4 app

1. install the contact plugin
   npm install @ionic-native/contacts@beta
2. add the plugin to appmodule
   import {Contacts} from '@ionic-native/contacts/ngx';
   add into the providers of appmodule.
   Related code:
   package.json
   @angular/common": "6.0.9",
   "@angular/core": "6.0.9",
   "@angular/forms": "6.0.9",
   "@angular/http": "6.0.9",
   "@angular/platform-browser": "6.0.9",
   "@angular/platform-browser-dynamic": "6.0.9",
   "@angular/router": "6.0.9",
   "@ionic-native/camera": "^5.0.0-beta.14",
   "@ionic-native/contacts": "^5.0.0-beta.14",
   "@ionic-native/core": "5.0.0-beta.14",
   "@ionic-native/splash-screen": "5.0.0-beta.14",
   "@ionic-native/status-bar": "5.0.0-beta.14",
   "@ionic/angular": "4.0.0-beta.0",
   "@ionic/ng-toolkit": "1.0.0",
   "@ionic/schematics-angular": "1.0.1",
   "cordova-plugin-camera": "^4.0.3",
   "cordova-plugin-contacts": "^3.0.1",
   "core-js": "^2.5.3",
   "rxjs": "6.2.2",
   "zone.js": "^0.8.26"
   }

app.module

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 {Camera} from '@ionic-native/camera/ngx';
import {Contacts} from '@ionic-native/contacts/ngx';

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

}

Other information:

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

Ionic:

   ionic (Ionic CLI)          : 4.0.3 (C:\Users\chandansutradhar\AppData\Local\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.1

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   Android SDK Tools : 26.0.1
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.1.0
   OS                : Windows 10

Environment:

   ANDROID_HOME : C:\Android

[Mayank5510]

Hello ,

I have also same problem if solution available please provide.

thanks

[JavyMB]

I just tested using NPM:
npm install --save @ionic-native/[email protected]
and the issue persists.

I see is fixed on the typescript file in pull request #2659, but if you take a look at the ngx/index.js the file still do a double-import.

Maybe it's an NPM build problem?

Thanks,

[danielsogl]

Looks like because the file is definitely fixed. I will publish another beta release later this week.

[MKhowaja]

@danielsogl Hey we still see the issue on ionic-native/[email protected]

Looks like even in the newer releases, npm isn't getting the changes from this fix.

[avegpatekar]

Any solution to this. I am also facing the same issue.

[kfjiwani]

This is still an issue. Locally I can always remove the duplicate entry for 'checkavailability' but i have less control when I try to do a build on ionic pro site. The issue persists in to build on ionic pro.
Any ideas how to fix this?

[avegpatekar]

This is just a workaround where you don't have to manually remove the duplicate parameter. This can be used with CICD, Heroku/AWS deployment, etc.

I have written a node script to remove additional 'checkavailability' parameter from the index.js file.

(() => {
  var path = require('path');
  var fs = require('fs');
  var filePath = path.join(__dirname, '../node_modules/@ionic-native/contacts/index.js');
  console.log('File path', filePath);

  fs.readFile(filePath, 'utf-8', function(err, data) {
    if (err) throw err;
    let splittedData = data.split(' ').filter((value) => value === 'checkAvailability,');
    if (splittedData.length > 1) {
      var newData = data.replace('checkAvailability, ', '');
      fs.writeFile(filePath, newData, 'utf-8', function(err) {
        if (err) throw err;
        console.log('>> Successfully updated contact/index.js file.');
      });
    }
  });
})();

In package JSON, added below snippet under scripts section to run the script.
"postinstall": "node ./config/update-contact-index.js
Everytime when the node package gets installed, this script ensures that there is no duplicate parameter.

[kfjiwani]

@avegpatekar - Great solution. The only change I made was to change the file path to include 'ngx' for ionic 4 beta
var filePath = path.join(__dirname, '../node_modules/@ionic-native/contacts/ngx/index.js');