Missing dependencies after Ionic 3 update

Ionic Framework ionic-v3
1

Hi

I just followed the update guide in the github commits but after going thru all these steps, i encountered some import errors. It doesn’t find the classes i define. Here are some examples:

import { Camera, CameraOptions } from '@ionic-native/camera';
import { ModalController } from 'ionic-angular/components/modal/modal';
import { FileUploadResult } from 'ionic-native/dist/esm';

These are all over my files, i tried it with the @ as you can see and without it.
Here’s my package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "version": "3.0.1",
  "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": "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",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.0",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4",
    "angular2-moment": "^1.1.0",
    "angular-emojify": "0.2.0"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1"
  },

Anyone can help me? thanks

2

That first one looks OK to me. The second one should be just “ionic-angular” and the third “@ionic-native/transfer”.

1 Like
3

Ok I still get the “Cannot find name ‘CameraOptions’ in the index” even tho i corrected it as you said. It seems to me that all interfaces are having troubles being imported… Other’s include:

  • CameraOption
  • FileUploadResult
  • FileUploadOptions
  • Transfer
4

“in the index” strikes me as weird for an error message of this sort. Are these coming when you try to build or from your IDE?

5

the message came from the IDE. When running it with “ionic run ios -lc” it says “Cannot find name ‘CameraOptions’.” The app doesn’t log a device fired message either, it’s just stuck in the splash screen.

6

I would try cleaning out node_modules and running npm i again. If that doesn’t solve the problem, try generating a new project and dropping your code into it. The following builds and runs without error for me:

import {Camera, CameraOptions} from "@ionic-native/camera";

constructor(public camera: Camera) {}
takePicture(): void {
  let co = {} as CameraOptions;
  this.camera.getPicture(co).then((pic) => console.log(pic));
}

PS: look into ditching angular2-moment in favor of date-fns. Plays much more nicely with tree-shaking.

7

After cleaning out node_modules and doing an npm i the problem was still there.
Then I set up a new v3 project and when i started it everything worked fine.
But after copying my code over to the new project the failed imports were there again and basically the situation was the same as before. :sweat:

8

At this point I think we are going to need access to a complete repo that people can clone, unless somebody else has other ideas. You have to figure out what is different between your code and the working snippet I posted.

9

yea sure the pre 3.0 build is on github: https://github.com/eggplantPrince/tootyFruity
The line i see the error in is basically the same as yours… so I really don’t know why it doesn’t import it correctly : /

10

(a) you have a zillion broken imports of things like ModelController that need to be changed to just “ionic-angular”.

(b) you need to refactor all native things to use the new injectable syntax, so instead of calling (for example) class methods on Camera, you need to inject an object of type Camera and call methods on that.

(c) Similar thing for your ActionSheet call: need to inject an ActionSheetController, call create() on it, and then present() on the result.

(d) same story for the file transfer object in APIProvider.ts: don’t create it manually, but inject an object of type Transfer, call create() on it and use the result to upload().

Q&D diff of changes I made are here. That version builds.

2 Likes
11

Hi!
So first of all, thanks a lot for sticking with my problem and helping me, I appreciate it very much.
Now, I tried to import your .diff file but when I did my command line said it was corrupt so I did it manually. Currently I have no more errors while building (yay), but when i do ionic run ios, the app is still stuck at the splashscreen loading screen, without any errors being displayed. I created a new branch for the update, so maybe someone could check it out? Its here

12

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

13

So yea Safari didn’t have any infos for me but when I debugged it with Android it showed me some more errors and I was able to resolve the issue by just adding more Providers etc. Thanks all!