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

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.

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:

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ā€™).

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!

Importing BrowserModule into your app module.

This should help:

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