Upgrading from angularjs+ionic-v1+cordova to angular7+ionic4+ionic-native

Hi i’m coming from C++ world and new to web/mobile development.

i got a mobile app created using angularjs and ionic-v1 and cordova and i want to upgrade it to the latest available frameworks.

i’ve read angularjs-angular upgrade tutorial at https://angular.io/guide/upgrade but it doesn’t give me a clue about how to upgrade ionic at the same time.

For example, i couldn’t manage to import ‘ionic’ module as a dependency to an angularjs module (i’m trying to use webpack as the module loader).

i’ve tried all of the following one by one:
import * as ionic from ‘@ionic/angular’;
import * as ionic from ‘@ionic/core’;
import * as ionic from ‘ionic-angular’;

an got the following:

Blockquote
“Module ‘ionic’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.”

when i try this:
import * as ionic from ‘ionic’;

i get many errors like the following:

Blockquote
./node_modules/ionic/lib/integrations/cordova/android.d.ts 1:7
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
export declare function getAndroidSdkToolsVersion(): Promise<string | undefined>;
| export declare function locateSDKHome(): Promise<string | undefined>;
| export declare function parseSDKVersion(contents: string): Promise<string | undefined>;

my angularjs module is defined as follows:

// import stuff…

const app = angular.module(‘ionicApp’, [‘ionic’, ‘ngRoute’])
.run([‘$rootScope’, ‘$ionicPlatform’, ‘dataProvider’, ‘$ionicHistory’, function($rootScope, $ionicPlatform, dataProvider, $ionicHistory) {
$ionicPlatform.ready(function() {

}
});

does what i am trying to do make any sense or am i trying to do something terribly wrong?

what is the correct/easiest way to approach upgrading my app?:

  • should i upgrade ionic1 to ionic4 first and then upgrade angularjs to angular?
  • or upgrade angularjs to angular first and then ionic1 to ionic4?

i had seen that guide but unfortunately it’s too superficial. it doesn’t answer my questions.

to repeat my question, which one is possible/easier? upgrading ionic first and then angularjs? or angularjs first and then ionic? or do i have to upgrade both at the same time?

do we have any tutorial/resource that explains one of the above paths in greater detail?

Neither is easier.

There is no smooth way to upgrade since ionic4/angular has breaking changes. Your best bet is to create a new ionic 4 project and just transfer over your code. Good luck.