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

**URL:** <https://forum.ionicframework.com/t/need-help-converting-template-from-ionic-2-to-3-tabs-side-menu/91860>\
**Category:** ionic-v3\
**Created:** [May 26, 2017, 12:38pm UTC](https://forum.ionicframework.com/t/need-help-converting-template-from-ionic-2-to-3-tabs-side-menu/91860 "2017-05-26T12:38:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mlibby](https://avatars.discourse-cdn.com/v4/letter/m/9de0a6/32.png) [@mlibby](https://forum.ionicframework.com/u/mlibby)\
**Post date:** [May 26, 2017, 12:38pm UTC](https://forum.ionicframework.com/t/need-help-converting-template-from-ionic-2-to-3-tabs-side-menu/91860/1 "2017-05-26T12:38:04Z")

</div>

**I need help converting the “Tabs & Side Menu” template ([market.ionic.io/starters](http://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:

```auto
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](https://market.ionic.io/starters/tabs-and-menu-starter))
2. Update [Ionic components](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md): Update package.json to match the following dependencies:

```auto
"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.**

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [May 26, 2017, 3:05pm UTC](https://forum.ionicframework.com/t/need-help-converting-template-from-ionic-2-to-3-tabs-side-menu/91860/2 "2017-05-26T15:05:14Z")

</div>

> [@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](https://ionic.io/blog/ionic-native-3-x)**
>
> Today we’re excited to release the 3.x version of Ionic Native, a project that makes it easy to use over 130 native mobile SDK features in your app through simple JavaScript interfaces, in a way that works across all major platforms (and now the...

---

<div class="post-metadata">

**Author:** ![SigmundFroyd](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sigmundfroyd/32/111604_2.png) [@SigmundFroyd](https://forum.ionicframework.com/u/SigmundFroyd)\
**Post date:** [May 26, 2017, 3:06pm UTC](https://forum.ionicframework.com/t/need-help-converting-template-from-ionic-2-to-3-tabs-side-menu/91860/3 "2017-05-26T15:06:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mlibby](https://avatars.discourse-cdn.com/v4/letter/m/9de0a6/32.png) [@mlibby](https://forum.ionicframework.com/u/mlibby)\
**Post date:** [May 26, 2017, 4:38pm UTC](https://forum.ionicframework.com/t/need-help-converting-template-from-ionic-2-to-3-tabs-side-menu/91860/4 "2017-05-26T16:38:22Z")

</div>

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:

```auto
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!

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [May 26, 2017, 6:36pm UTC](https://forum.ionicframework.com/t/need-help-converting-template-from-ionic-2-to-3-tabs-side-menu/91860/5 "2017-05-26T18:36:17Z")

</div>

> [@mlibby](#):
>
> Please let me know what to try next.

Importing `BrowserModule` into your app module.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [May 26, 2017, 6:43pm UTC](https://forum.ionicframework.com/t/need-help-converting-template-from-ionic-2-to-3-tabs-side-menu/91860/6 "2017-05-26T18:43:23Z")

</div>

This should help:

> [@Guide: How to update to Ionic 3.X](https://forum.ionicframework.com/t/guide-how-to-update-to-ionic-3-x/87516):
>
> 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](http://blog.ionic.io/ionic-3-0-has-arrived/) to understand which things have changed. Follow the links! Read the[blog post](http://blog.ionic.io/ionic-native-3-x/) about Ionic Native 3. Read the [blog post](http://blog.ionic.io/ionic-and-rtl/) abo…

---

<div class="post-metadata">

**Author:** ![mlibby](https://avatars.discourse-cdn.com/v4/letter/m/9de0a6/32.png) [@mlibby](https://forum.ionicframework.com/u/mlibby)\
**Post date:** [May 26, 2017, 8:29pm UTC](https://forum.ionicframework.com/t/need-help-converting-template-from-ionic-2-to-3-tabs-side-menu/91860/7 "2017-05-26T20:29:53Z")

</div>

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](https://market.ionic.io/starters/tabs-and-menu-starter))
2. Update Ionic components: Update package.json to match the following dependencies

```auto
"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](https://forum.ionicframework.com/t/guide-how-to-update-to-ionic-3-x/87516?source_topic_id=91860)