Update old ionic app

Ionic Framework
1

Hi all,
I wrote an ionic app about 2 years ago and I’m trying to resurrect it. Unfortunately things have moved along an nothing works anymore.
What is the minimum set of files I need to try to get it back up and working in a later version of ionic ?

I’ve tried to google it but either the suggestions don’t work of there is just too much information - so much so that I’d be better off doing it from scratch again !

Thanks in advance for any help.

2

first of all, can you please copy your “ionic info” output ?
anyway, some months ago i’ve made a migration from ionic 3 to ionic 5 (and now to 6): it has been a long process but with patience and some cups of coffee you should be able to do it :slight_smile:

3

Thanks. This is the ionic info output from

% cd app_im_trying_to_port
% ionic info > output.txt 2>&1

output.txt =

WARN Error loading ionic-angular package.json: Error: Cannot find module 'ionic-angular/package'
       
       Require stack:
       - /home/john/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/lib/project/index.js
       - /home/john/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/lib/index.js
       - /home/john/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/index.js
       - /home/john/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/bin/ionic
WARN Error loading @ionic/app-scripts package.json: Error: Cannot find module '@ionic/app-scripts/package'
       
       Require stack:
       - /home/john/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/lib/project/index.js
       - /home/john/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/lib/index.js
       - /home/john/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/index.js
       - /home/john/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI          : 6.18.1 (/home/john/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework    : not installed
   @ionic/app-scripts : not installed

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 6.3.0
   Cordova Plugins   : cordova-plugin-ionic-webview 1.1.1, (and 6 other plugins)

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v16.13.1 (/home/john/.nvm/versions/node/v16.13.1/bin/node)
   npm    : 8.1.2
   OS     : Linux 5.11
4

Seems like your ionic installation is incomplete

Try to install it again

5

Thanks for your help so far.
Installing ionic again won’t help - I’ve already tried it multiple times :slight_smile:
Trouble is that I don’t understand the ionic architecture well enough to know what is local to a project and what is system wide - but I suspect the issue is that because this is an old app there are bits of an old ionic in place that don’t play nicely with the new ionic install.
I’d like to find the minimum set of files I need to copy into a brand new ionic app and then port as necessary.
At this stage I’m thinking about doing another “ionic for idiots” tutorial to get my head back in the game and then re do the app copying bits of logic as required.

6

at this moment, please consider investing your time in a full upgrade =) it will take a lot of time, maybe one week, but it will worth it.

7

just start from scratch. it will be easier.

8

Thanks guys.
I’ve started with a clean app (ionic start) and then replaced the src directory with my old src directory and am going through and fixing every error as I find it.

I’ll have to redo the whole navigation - I was doing some stuff like inserting pages into the stack at a position so I could push/pop to a specific detail page - I can’t see how to do that now so I’ll have to change that :frowning:

9

I’m well underway in getting things back up and running one page at a time.
I have hit one snag that I haven’t beaten yet. My old page generated a list and colored a selected item on it using “inline CSS”

<ion-item *ngFor="let item of list_of_items" [style.background-color]="(item.checked)?'#32db64' : ''">

So basically for each item in a list render it and if it’s checked give it a specific background color.
This isn’t working on my new page so I’m assuming it doesn’t work and I need to do it a different way ?
Is it still possible to do something on the fly like this?

10

Use ngClass, if the condition is true it applies a class to that item

11

Thanks. It worked. For anyone else who stumbles upon this in 2 years time:
I set up a list-checked css rule and then the line becomes
<ion-item *ngFor="let item of list_of_items" [ngClass]="item.checked?'list-checked':''">

12

I find it more readable to write it like this:

[ngClass]="{'list-checked': item.checked}"

ngClass is pretty versatile. You can feed it a string, an array (in which case it adds all the elements), or an object like above, where it adds all the keys whose corresponding values are truthy.

13

Thanks. Agreed that looks better (and I confirmed it still works).
I haven’t touched ionic/TS etc for a few years but it’s all coming back to me slowly.
Haven’t had to make major changes. The biggest one is routing and getting data to the next page, but I’ve already got a service that does most of the heavy lifting so I just stored some extra data in there to communicate between pages.

Next on the list is a grid. I previous used bootstrap “col-8”, “col-4” etc to get sizes right, but that’s not working so I’ll have to find the new way to do that.

14

This page is all I’ve ever needed.

15

Thanks. The gird is working now but having no luck with the spash screen. Every google search gives a different result none of which seem to match the directory structure that was generated for me :frowning:

16

I’m thinking about doing another “ionic for idiots” tutorial to get my head back in the game and then re do the app copying bits of logic as required.. .