Ionic upgrade breaks my app

ionic-v1
1

Hi all,

I recently updated to the latest ionic for a new project.
I did it globally (npm install -g ionic), and it brought me to ionic 2.2.2

However, when I get back to an older project (which is still using ionic 1), even if it all looked good from ionic serve, when I build it to try on my android, the whole app breaks appart : my css is totally messed up, and many of my plugins behave like crazy (so the javascript seems broken, too )

and now, I can’t seem to get back to an older version of ionic to fix it.

When I run npm uninstall -g ionic, it works good and uninstall it.

Then I run npm install -g ionic@1.7.6 , and after a while it always ends up with error, not installing ionic.
Only npm install -g ionic seems to be working (but it installs the latest version)

image
image.png1163×354 9.94 KB

i do have the latest version of node and npm, so I don’t understand why I get this error.

Please, help :slight_smile:

2

‘ionic’ in npm is actually the Ionic CLI, not the framework itself. So you are on 2.2.2 of the Ionic CLI now?
Did package.json for you old Ionic 1 app change?

3

Hi @Sujan12,

thanks a lot for your time.

Here is my ionic info :
image

I am starting to think, if my ionic serve isn’t broken at all, and my app only gets broken when I built it and put it on my phone, maybe it’s the cordova upgrade that messed it all up ? is that possible ?
( coz the problem appears when I cordova build --release android )

When i check the “last modified” date of my package.json, it seems like it got updated.
However the content is the same as before (I think…)
My main problem is that I never really maintained my package.json file or paid much attention to the versioning. so far updating always happened without issue.

Even my ionic lib does not seem to be updated :

image
image.png905×302 16.6 KB

image
image.png1049×563 12.2 KB

Can I send anything that would help you investigate ?

Thanks again :slight_smile:

4

Ionic Library is project specific, so it makes sense this wasn’t updated. You would have to do this manually by editing package.json.

Whoah, not versioning? git? You really should use that, even with a local repository just to be able to follow the changes.

Very much. Which cordova-ios and cordova-android versions were/are you using?

5

I got really worse situation here:

when using previous version, ionic start works fine at least.

6

Yes, I am now versioning with my new project, but never had such “good practice” on my very first one.
Someday, I will take the time to clean it all up.

How do I get my cordova-android version ?

when I type cordova -v, I get 6.4.0

But how could a different version of cordova break my css when I build my app ?

7

Adding git to exisitng projects is reallly easy.

ionic platform ls

8

Here it is :

ionic platform ls

image

But my main problem now is that I cannot install ionic@1.7.14 for example.
Which is the version I used to have before everything went wrong if I remember correctly, because of errors mentionned above. :confused:

9

Is it possible that my node version (which got updated recently) is the root cause for me not being able to install ionic@1.7.14 ?

Is there some sort of listing where I can find which ionic version goes best with which version of node ?

10

I have no idea. I think they should all work well with each other, but that’s really just a guess.

11

I thought so too, but then how to explain that I can easily run npm install -g ionic but I cannot run npm install -g ionic@1.7.14 ?
This error is killing me. :confused:

12

No idea myself, sorry. :frowning:

13

Hmm, it could be an issue with the node version and node-sass version conflicting. Any particular issues whey you’re needing the older version?

14

Hi @mhartington, yes I need an older version so that when I build my app it won’t break all over my css and some plugin.

Since I upgraded node / ionic / npm, even if my ionic serve looks the same, the cordova build --release android creates a different sized apk as before, and when I run it on my android most of the css breaks apart.

Indeed it seems to be a node / node-sass version conflicting.
I went back to a node v 4.4.4, and now I can finally npm install -g ionic@1.7.14 without error.

Now it’s the npm install -g cordova that seems to be stuck since it’s loading for an hour now, but at least it’s a different problem… :slight_smile:

image
image.png709×63 1.76 KB

I pray that once cordova gets installer, my ionic@1.7.14 will finally build my apk properly like before…

1 Like
15

@mhartington, the cordova install is okay now.

However, I just realized I have no “node_modules” left inside my project. (been trying so many things, that I ended up removing it…)

Now I cannot build of course without it.

=> can I get the node_modules from my Appdata/Roaming/npm/node_modules/ionic ?

16

node_modules is the result of running npm install in a folder where there is a package.json. If you are missing the folder, just rerun npm i (alias of npm install).

17

Thanks again for this precision.

I re-generated my node_modules, now I can finally build again.

But, the .apk is still corrupted and bigger than before, even if I got my old ionic and node version back :frowning:
What else could be involved ? is npm responsible for the final apk ? or cordova ?

18

Strongly recommend you to upgrade all you plugin to the new version for ionic 2.2.2.
Your old codes will cause lots of unexpected behavior, just as I encountered…

And this may including some code changes for your project, especially import parts.