Need help converting template from Ionic 2 to 3 -- Tabs & Side Menu


#1

I need help converting the “Tabs & Side Menu” template (market.ionic.io/starters) from Ionic 2 to 3. I’ve worked with Ionic 1, skipped over Ionic 2 and am now muddling my way into Ionic 3. I can successfully run the Ionic 3 HelloWorld app. Below is my error and setup steps for converting the “Tabs & Side Menu” template from Ionic 2 to 3:

  1. Error when running ionic serve:
Error: Cannot find module "ionic-native"
    at Object.<anonymous> (http://localhost:8100/build/main.js:73906:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:73663:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:110741:70)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at http://localhost:8100/build/main.js:66:18
    at http://localhost:8100/build/main.js:69:10

Steps:

  1. Download and extract zip (https://market.ionic.io/starters/tabs-and-menu-starter)
  2. Update Ionic components: Update package.json to match the following dependencies:
"dependencies": {
  "@angular/common": "4.1.2",
  "@angular/compiler": "4.1.2",
  "@angular/compiler-cli": "4.1.2",
  "@angular/core": "4.1.2",
  "@angular/forms": "4.1.2",
  "@angular/http": "4.1.2",
  "@angular/platform-browser": "4.1.2",
  "@angular/platform-browser-dynamic": "4.1.2",
  "@ionic-native/core": "3.10.2",
  "@ionic-native/splash-screen": "3.10.2",
  "@ionic-native/status-bar": "3.10.2",
  "@ionic/storage": "2.0.1",
  "ionic-angular": "3.3.0",
  "ionicons": "3.0.0",
  "rxjs": "5.1.1",
  "sw-toolbox": "3.6.0",
  "zone.js": "0.8.11"
},
"devDependencies": {
  "@ionic/app-scripts": "1.3.7",
  "typescript": "2.3.3"
}
  1. Open command, navigate to project root and run:
    a) npm install
    b) npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
    c) npm install --save-dev --save-exact @ionic/cli-plugin-cordova@latest
    d) Run “Cordova platform add android --save”
    e) Run “Cordova platform add ios --save”
  2. Run ionic serve –l
    a. Enter ‘y’ when prompted, ‘Looks like this is an Ionic Angular project, would you like to install @ionic/cli-plugin-ionic-angular and continue? (Y/n)’
  3. Browser opens and displays above error

What did I miss or am I doing wrong? Please remember that I’m an Ionic 2/3 newbie.


#2

Somewhere in the code you are still using ionic-native. The dependencies are already upgraded to use @ionic-native/core so it can’t find ionic-native.

Here is some background on the changes:
http://blog.ionic.io/ionic-native-3-x/


#3

Is there perhaps some code referencing ionic-native, e.g. import { SplashScreen } from 'ionic-native';? If so, you’ll need to update it to the new path, e.g. import { SplashScreen } from '@ionic-native\splash-screen.

This was changed in Ionic-native 3, which your template may have been using an older version based on the error message (as nothing should reference ‘ionic-native’, rather it should reference ‘@ionic-native’).


#4

Thanks. Following your instructions I got a little further but am still getting an error.

Steps:

  1. Change all places in the code referencing @ionic-native to @ionic-native/core
    app.module.ts
    a) Changed” “import { StatusBar, Splashscreen } from ‘ionic-native’;” to
    import { StatusBar } from ‘ionic-native/status-bar’;
    import { SplashScreen } from ‘ionic-native/splash-screen’;
    b) Updated reference SplashScreen in code to Splashscreen
    c) Commented out line Splashscreen.hide and StatusBar.styleDefault

Rerun and get the following error:

Runtime Error
No provider for ApplicationInitStatus!
Stack
Error: No provider for ApplicationInitStatus!
    at injectionError (http://localhost:8100/build/main.js:1509:86)
    at noProviderError (http://localhost:8100/build/main.js:1547:12)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3048:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3087:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3019:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2888:21)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3835:52)
    at http://localhost:8100/build/main.js:5037:70
    at _callAndReportToErrorHandler (http://localhost:8100/build/main.js:4938:39)
    at http://localhost:8100/build/main.js:5036:20

Please let me know what to try next.

Thanks!


#5

Importing BrowserModule into your app module.


#6

This should help:


#7

Thank you again Sujan12: :slight_smile: Success - the guide helped!

Here’s a recap of my steps incase anyone follows along…

  1. Download and extract the zip (https://market.ionic.io/starters/tabs-and-menu-starter)
  2. Update Ionic components: Update package.json to match the following dependencies
"dependencies": {
  "@angular/common": "4.1.2",
  "@angular/compiler": "4.1.2",
  "@angular/compiler-cli": "4.1.2",
  "@angular/core": "4.1.2",
  "@angular/forms": "4.1.2",
  "@angular/http": "4.1.2",
  "@angular/platform-browser": "4.1.2",
  "@angular/platform-browser-dynamic": "4.1.2",
  "@ionic-native/core": "3.10.2",
  "@ionic-native/splash-screen": "3.10.2",
  "@ionic-native/status-bar": "3.10.2",
  "@ionic/storage": "2.0.1",
  "ionic-angular": "3.3.0",
  "ionicons": "3.0.0",
  "rxjs": "5.1.1",
  "sw-toolbox": "3.6.0",
  "zone.js": "0.8.11"
},
"devDependencies": {
  "@ionic/app-scripts": "1.3.7",
  "typescript": "2.3.3"
}
  1. Open command, navigate to project root and run:
    a) npm install
    b) npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
    c) npm install --save-dev --save-exact @ionic/cli-plugin-cordova@latest
    d) npm install @ionic-native/core --save
    e) Cordova platform add android --save
    f) Cordova platform add ios --save

  2. Change all places in app.module.ts referencing @ionic-native to @ionic-native/core

  3. Changed “import { StatusBar, Splashscreen } from ‘ionic-native’;”
    b) To: “import { StatusBar } from ‘ionic-native/status-bar’;” and import { SplashScreen } from ‘ionic-native/splash-screen’;
    c) Add:
    Import {BrowserModule} from ‘@angular/platform-browser’;
    Imports:[
    BrowserModule,
    IonicModule.forRoot(MyApp)
    ],
    d) Updated reference SplashScreen in code to Splashscreen
    e) Commented out line Splashscreen.hide and StatusBar.styleDefault
    a. Need to read docs to figure out replacement calls.

Get stuck… Follow Guide