White screen of death after upgrading ionic

Ionic Framework ionic-v3
1

Hi,
I have this problem that is driving me nuts for several weeks already and I just can’t seem to find any solution.

I have updated ionic and my app which was building just fine for more then a year is now broken. I mean I can run ionic serve and it works but when I do a cordova build for android I always only see the dreaded white screen of death. If I connect to the device with chrome dev tools, I get the following output:


Viewport argument key "viewport-fit" not recognized and ignored. [index.html:9](file:///android_asset/www/index.html)

Uncaught Error: Cannot find module "." [vendor.js:1](file:///android_asset/www/build/vendor.js)

Ionic Native: deviceready event fired after 441 ms [vendor.js:1](file:///android_asset/www/build/vendor.js)

Well, since then I have tried everything… Updating the packages, downgrading packages, trying out all sorts of typescript versions, removing all of the cordova plugins and platform and recreating them again with ionic cordova prepare. I also went back in my git history and tried to get the exact state of the packages by reconstructing the versions from the package-lock… I updated node.js. I did everything I could think of. Nothing seems to help.

If I create a new app from any of the templates, it works.

The only thing I didn’t try out is going back to the ionic-cli version I was using before messing up with all the versions. But the problem is that I don’t remember the version I used at the point when I created the project, and ionic is installed globally so I have no package.json history for that one…

Any help is really appreciated. I am at my wits end…

//edit: current ionic version:

Ionic:

   Ionic CLI          : 5.2.3 (C:\Users\Aros\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.5
   @ionic/app-scripts : 3.2.2

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4, browser 5.0.3, windows 5.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10
2

Out of sheer desperation, I was trying random older versions of ionic-cli… Going to older 3.20.1 did the trick.

1 Like
3

Since you already fixed your project by going to an older cli I would delete all the ionic packages in global and reinstalling.

Afterwards I would create a new blank project and add all of your files in src or overwrite those files and checking each line of the files that should be used by Angular to start doing its thing. Specially since you said converted everything from Angular 5 to 7.

Copy every line in the package.json that is under anything that has dependencies on it. There are some that were made for ionic v3 that don’t work for 4 anymore so gets info what they are (there was something call “app-” something that was a builder of some sort that don’t work for v4 because it is now a web component for example). Examples of custom lines are like if you use a custom JS DB/storage or Chart.js.

But don’t delete the old app (I always name it myappV1), just copy everything and keep testing until it works. That happened to me in the past and that’s how I fixed it. But it takes time and patience.

4

You are right that not everything seems to be working. For example live-reload doesn’t. Whatever change I do in whichever file, the app is not refreshed. I always need to close ionic serve and run it again. There also seem to be white screen issues on some devices still… Oh crap.

And also I get these error when running npm info:

npm ERR! peer dep missing: @angular/common@>=6.0.0-rc.0, required by @ngx-translate/http-loader@3.0.1
npm ERR! peer dep missing: @angular/core@>=6.0.0-rc.0, required by @ngx-translate/http-loader@3.0.1
npm ERR! peer dep missing: @ngx-translate/core@>=10.0.0, required by @ngx-translate/http-loader@3.0.1
npm ERR! peer dep missing: typescript@>=2.4.2 <2.7, required by @angular/compiler-cli@5.2.9
npm ERR! peer dep missing: typescript@>=2.4.2 <2.8, required by tsickle@0.27.2

I will try the process you outlined. Thanks.