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.

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.

• javascript
• ios
• angularjs
• cordova
• ionic-framework

Share Improve this question Follow asked Jan 9, 2017 at 10:13 Marius BancilaMarius Bancila 16.3k99 gold badges5353 silver badges9797 bronze badges 8

• Can you try replacing your <meta> tag with this <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-inline' 'unsafe-eval'"> ? – David R Commented Jan 9, 2017 at 10:17
• Also, I presume that you have placed your code inside $ionicPlatform.ready() function. – David R Commented Jan 9, 2017 at 10:17
• I did change the meta tag as you suggested, but did not help. My code runs in the module's run block. No change if I move to $ionicPlatform.ready() inside called from run. But this is something that used to work very well on previous versions, 8 and 9. – Marius Bancila Commented Jan 9, 2017 at 12:34
• 2 The state is now suggested that the application wasn't bootstrapped properly, it can be for various reason, 1. js exception during bootstrap, 2. angular not present, 3. any 3rd party library used is not present (causing 1) – maurycy Commented Jan 17, 2017 at 13:52
• does it work if you remove the Content-Security-Policy meta tag? – jcesarmobile Commented Jan 17, 2017 at 22:44

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 5

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;
         }]);
}());

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.