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:
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
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ā
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)ā
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.
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:
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
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
Change all places in app.module.ts referencing @ionic-native to @ionic-native/core
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.