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.

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
– David R, Commented Jan 9, 2017 at 10:17
Also, I presume that you have placed your code inside $ionicPlatform.ready() function. — David R
– 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
– Marius Bancila, Commented Jan 9, 2017 at 12:34
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
– maurycy, Commented Jan 17, 2017 at 13:52
does it work if you remove the Content-Security-Policy meta tag? — jcesarmobile
– jcesarmobile, Commented Jan 17, 2017 at 22:44

Marius Bancila · Accepted Answer · 2017-01-20 14:33:23Z

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

answered Jan 20, 2017 at 14:33

Marius Bancila

16.4k9 gold badges53 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

maurycy Over a year ago

So this threw an exception and stopped application from bootstraping

Marius Bancila Over a year ago

Yes, so you were right about a problem with the bootstrapping.

Kumar Rakesh · Accepted Answer · 2017-01-24 06:22:26Z

3

+75

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.

answered Jan 24, 2017 at 6:22

Kumar Rakesh

2,7082 gold badges20 silver badges39 bronze badges

1 Comment

captain_jim1 Over a year ago

Man, CMD-R just saved me -- I had no idea that command exists. Apparently some of my cordova plugins weren't being loaded, but I had no idea because they are the first errors being thrown before I could get the dev console open. Thank you!!

Collectives™ on Stack Overflow

angular/ionic not working on iOS 10

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related