angular/ionic not working on iOS 10

Question

I have an Cordova app developed with the Ionic framework that used to work well on iOS, but on iOS 10 it does not. When I start the app in the simulator nothing Angular specific works (bindings, events, etc.). Here is a screenshot.

If I attach the developer tools from Safari I cannot see anything in the console. However, if I press the Refresh button and the index page is reloaded everything starts working properly.

I suspect this is related to content security policy on iOS 10. My Content-Security-Policy meta tag looks like this:

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self' data: gap: file://* * 'unsafe-eval'; 
               script-src 'self' 'unsafe-inline' 'unsafe-eval' *; 
               style-src 'self' 'unsafe-inline' *; 
               media-src *">

I have tried various suggestions related to similar problems others have faced, but nothing helper. Any suggestion is appreciate.

Answer 1

I got this working, and the problem was a factory that was using Google Analytics. The code (partially) looked like this:

(function () {
   'use strict';

   angular
      .module('appname.factories')
      .factory("analyticsFactory", [
         function () {
            var trackInitialize = function () {
               if (typeof analytics !== undefined) {
                  analytics.startTrackerWithId("...");
               }
               else {
                  console.log("Google Analytics Unavailable");
               }
            };

            return {
               trackInitialize: trackInitialize
            }
         }]);
}());

This was called from the module's run block and analytics was not available. The fix was to pass $window to the factory in order to use analytics.

(function () {
   'use strict';

   angular
      .module('appname.factories')
      .factory("analyticsFactory", [
         '$window',
         function ($window) {
            var emptyFn;

            emptyFn = function () { };
            emptyFn['mocked'] = true;

            var analytics = $window && $window['analytics'] ? $window['analytics'] : {
               startTrackerWithId: emptyFn,
               trackView: emptyFn,
               trackEvent: emptyFn,
               trackException: emptyFn,
            };

            analytics.trackInitialize = function () {
               analytics.startTrackerWithId("...");
               if (analytics['mocked']) 
                  console.log("Google Analytics Unavailable");
            };

            return analytics;
         }]);
}());

Answer 2

I really appreciate with your answer, Thanks for share your answer as a reply. I have also got same issue using ionic2. A white screen showed only. After a lot of search and headache, I have added some changes like add gap etc. Then I got few points for getting an ionic build in ios 10 :

• CSP meta tags. Remove them if they're causing issues Errors in your code.
• Open the safari dev tools and inspect the device. Make sure to hit cmd-r to reload the app. Safari seems to miss any errors/console logs that happened before the dev tools are open.
• Ionic 2 projects. Check you build out put for Typescript errors. You might be missing types for third-party modules.
• Lint your code. Run your code through a linter. There could be errors that you are just not seeing. A linter will be able to catch these for you. V2 projects shoul use ionic's tslint rules, and V1 projects can use eslint.

Also make sure you all look at these options. This kind of error is often the cause of one small error in your code. You need to debug and provide the correct information. Thanks.