Troubleshooting modulerr errors in a production build

Sometimes, especially after doing a production build (gulp build) and then running the app on a device (ionic run), you see nothing but a "white screen" without having any idea what happened.

When running on an Android device, the first thing you can do is run adb logcat. If you then see something like this:

...
   Error: [$injector:modulerr]
...

then you have a case of the infamous "modulerr" (sic - with one 'e'). This article explains the background:

http://www.chrisgmyr.com/2014/08/debugging-uncaught-error-injectormodulerr-in-angularjs/

To debug and fix this error, you can follow these steps:

1. In index-template.html change ionicbundle from ionic.bundle.min.js to ionic.bundle.js

2. Modify src/lib/ionic/js/ionic.bundle.js as explained here: http://www.chrisgmyr.com/2014/08/debugging-uncaught-error-injectormodulerr-in-angularjs/

3. In your ionic.project file, change documentRoot from src to www

4. Execute:

   ionic serve -c --browser google-chrome --nogulp

   You should now see exactly why you are getting the blank screen (assuming it's a "modulerr"). In most cases, it's a matter of having forgot to add a 'script' tag for one or more Javascript libraries in index-template.html.

5. Revert steps 1 and 3

   (you can leave the ionic.bundle.js file from step 2 as-is so you can use it next time)