How to Create Ionic v3 App in Latest CLI v4.9.0 for Ionic v4

As the latest stable version of the Ionic framework, V4 has been released which is way more future proof and easily adaptable with new frameworks like react, Vuejs etc by using web components technology. But still, there are some developers who may prefer version 3 of Ionic as routing of ionic was having much more similarities to the native environment in terms of keeking view data or maintain the history of a view intact. We can easily use push & pop methods of NavController in ‘ionic-angular’ package.

Maintain View State History

As in latest version 4 currently, we are using the latest Angular 7’s routing in the Ionic project which does not maintain the history of views even if we use this.navCtrl.navigateForward(page)  this.navCtrl.navigateBack(page)  or this.navCtrl.navigateRoot(page)  these just animate views with forwarding or backward animation.

Migration of Older Projects in Version 3

For older projects which needs some changes can’t migrate quickly to a new version without testing and usability as Ionic 4 needs more time to get ready with production.

After the update of Ionic CLI from 4.8.0 to latest 4.9.0, Ionic v4 projects are created by default, which will not ask if you want previous or current version.

So here is the method to install or create Ionic version 3 project using the latest version of CLI 4.9.0

Update CLI to the latest version using below command

$ npm install -g ionic@latest

How to Create Ionic 3 Application in Latest Ionic CLI?

You need to add a — type option while creating a project like this

$ ionic start Ionic3Project blank --type=ionic-angular

This will create a project with an older version 3 project.

You can check more options here

How to Install Native Plugins in Ionic 3 Application in Latest CLI v 4.9.0

After creating new Ionic 3 Application using above CLI command you may face an issue if you follow steps for plugin installation here

For example, in my application, I faced this issue after installing the App Version plugin by following steps here

[ts]
Type ‘AppVersionOriginal’ is not assignable to type ‘Provider’.
Type ‘AppVersionOriginal’ is missing the following properties from type ‘FactoryProvider’: provide, useFactory [2322]

Uncaught Error: Invalid provider for the NgModule ‘AppModule’ – only instances of Provider and Type are allowed, got: [StatusBar, ?[object Object]?, …]
at syntaxError (compiler.js:486)
at compiler.js:15784
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (compiler.js:15752)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15320)
at JitCompiler._loadModules (compiler.js:34413)
at JitCompiler._compileModuleAndComponents (compiler.js:34374)
at JitCompiler.compileModuleAsync (compiler.js:34268)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
at PlatformRef.bootstrapModule (core.js:5578)

 

 

Here we need to install an older version of native plugins

Let’s take the example of App Version

Instead of

$ ionic cordova plugin add cordova-plugin-app-version
$ npm install @ionic-native/app-version

Install This

$ ionic cordova plugin add cordova-plugin-app-version
$ npm install @ionic-native/app-version@4.18.0

Here we need to define an older version of Native plugin we need to install for that we will define version.

UPDATE( 16 Feb 2019): So finally Ionic team updated their Native plugin documentation for Ionic 3 version now you simply need to add @4 after Ionic native plugin instead of full older version like

$ npm install @ionic-native/app-version@4