Can't resolve module @ionic-native/core, and other error occurs for translate,navCtrl etc


#1

I have been trying to integrate Facebook SDK in my Ionic2 app to log app events. Here is the dependencies in my package.json

"dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic-native/core": "^3.5.0",
    "@ionic-native/facebook": "^3.5.0",
    "@ionic/storage": "1.1.6",
    "cordova-uglify": "^0.2.8",
    "ionic-angular": "2.0.0-rc.2",
    "ionic-native": "2.2.3",
    "ionic2-custom-icons": "^0.3.1",
    "ionicons": "3.0.0",
    "ng2-translate": "^4.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },

I just tried to follow the docs guidelines for Facebook SDK https://ionicframework.com/docs/native/facebook/ …but after I import Facebook in my controllers, I am getting this error while build ,


can't resolve module @ionic-native/core from ../node_modules/@ionic-native/facebook/index.d.ts 
 Error: Cannot read property 'Plugin' of undefined, resolving symbol Facebook in ../node_modules/@ionic-native/facebook/index.d.ts

again i am finding a lot of errors in translate, navCtrl etc. modules which was perfectly fine a day before. I am finding no clue what went wrong.


#2

Get rid of that.

Then see if you did everything on https://ionicframework.com/docs/native/


#3

@Sujan12 , removed the “ionic-native”: “2.2.3” dependency from package.json. then followed the exact steps from ionic/docs/facebook.

  1. First it shows warning of UNMET PEER DEPENDENCY @ionic-native/core@^3.1.0 and UNMET DEPENDENCY rxjs@5.0.0-beta.12
  2. Ignoring these warnings, I could build the apk at this stage with Facebook imported in @NgModule (app.module.ts), but when it launched in phone, the screen was white and inspected console as Uncaught Error: Cannot find module "@ionic-native/core"
  3. And then i installed ionic-native/core from https://www.npmjs.com/package/ionic-native. and it showed warning UNMET DEPENDENCY rxjs@5.0.0-beta.12 even though my package.json consists of “rxjs”: “5.0.0-beta.12”,
  4. Ignoring the warning, i tried to build the apk, but found the same error as
can't resolve module @ionic-native/core from ../node_modules/@ionic-native/facebook/index.d.ts 
Error: Cannot read property 'Plugin' of undefined, resolving symbol Facebook in ../node_modules/@ionic-native/facebook/index.d.ts

#4

Not “even though”, because. If you are trying to use the most recent framework version, that rxjs dependency needs to be 5.1.1. More here.


#5

The problems is, I am using ng2-translate too in my app. So when I install updated plugins for facebook or native/core , they are being installed as per the latest version , but my ng2-translate requires some other version of the same modules i.e @angular/core, @angular/http, rxjs etc etc. Can you please suggest me a suitable combinations of module versions that will work for facebook, ng2-translate and ionic-native/core modules? I am at a loss …

Currently my package.json contains —

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/platform-server": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/facebook": "3.4.2",
    "@ionic/storage": "1.1.6",
    "cordova-uglify": "^0.2.8",
    "ionic-angular": "3.0.1",
    "ionic2-custom-icons": "^0.3.1",
    "ionicons": "3.0.0",
    "ng2-translate": "^5.0.0",
    "rxjs": "5.1.1",
    "zone.js": "0.8.4"
}
"devDependencies": {
    "@ionic/app-scripts": "0.0.46",
    "typescript": "2.0.6"
  },

which shows — ng2-translate@5.0.0 requires a peer of @angular/core@^2.0.0 but none was installed.


#6

I have not used it, but I suspect ng2-translate has been obsoleted by ngx-translate.


#7

Here is the updated ngx-translate guide: https://ionicframework.com/docs//resources/ng2-translate/


#8

The thing is , Ionic is upgrading to newer versions and it is introducing pretty good changes in plugin integration just like ng2-translate. I am getting error in many native modules while building the apk with this package
"@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/storage": "2.0.0", "ionic-angular": "2.2.0", "@ionic-native/core": "3.1.0", "@ionic-native/facebook": "3.1.0", "ionic-native": "2.4.1", "ionicons": "3.0.0", "rxjs": "5.0.1", "sw-toolbox": "3.4.0", "zone.js": "0.7.2", "ng2-translate": "^4.0.0",

in Contacts, Device etc etc. So now if I update to the latest version , I will have to change the whole translate process in my app which is really cumbersome!!! But I will have to since I need facebook sdk too. I was trying to avoid changing existing plugin integration, but seems it is the only way left !


#9

I also created a upgrade guide for Ionic 3 and the native plugins: Guide: How to update to Ionic 3.X