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

[mlibby]

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.

[Sujan12]

@mlibby

Error: Cannot find module “ionic-native”

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:

Ionic Native 3.x - Ionic Blog

[SigmundFroyd]

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’).

[mlibby]

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

Steps:

4. 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!

[rapropos]

@mlibby

Please let me know what to try next.

Importing BrowserModule into your app module.

[Sujan12]

This should help:

Guide: How to update to Ionic 3.X

[image] Updates: 08.11.2017 - Angular 5.0 and Ionic 3.9 I want to share this guide to the community because there comes often the question: “How can I update from Ionic 2.x to Ionic 3.0?”. This guide should help you to upgrade in just 3 simple steps. Before you start there are three important points you should do first: Read the release blog post for Ionic 3.0 to understand which things have changed. Follow the links! Read the blog post about Ionic Native 3. Read the blog post abo…

[mlibby]

Thank you again Sujan12: 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"
}

3. 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

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

5. 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