角度/离子在iOS 10上不起作用

时间:2022-04-25 04:34:04

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.

我有一个使用Ionic框架开发的Cordova应用程序,以前在iOS上运行良好,但在iOS 10上却没有。当我在模拟器中启动应用程序时,没有Angular特定的工作(绑定,事件等)。这是一个截图。

角度/离子在iOS 10上不起作用

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.

如果我从Safari附加开发人员工具,我在控制台中看不到任何内容。但是,如果我按下刷新按钮并重新加载索引页,一切都开始正常工作。

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

我怀疑这与iOS 10上的内容安全策略有关。我的Content-Security-Policy元标记如下所示:

<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.

我已经尝试过与其他人面临的类似问题相关的各种建议,但没有任何帮助。任何建议都表示赞赏。

2 个解决方案

#1


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.

这是从模块的运行块调用的,并且分析不可用。解决方法是将$ window传递给工厂以使用分析。

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

#2


3  

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 :

我非常感谢您的回答,感谢您分享您的回答作为回复。我使用ionic2也遇到了同样的问题。仅显示白色屏幕。经过大量的搜索和头痛,我添加了一些变化,如添加间隙等。然后我得到几点在ios 10中获得离子构建:

  • CSP meta tags. Remove them if they're causing issues Errors in your code.
  • CSP元标记。如果它们导致问题,则删除它们代码中的错误。
  • 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.
  • 打开safari开发工具并检查设备。确保点击cmd-r重新加载应用程序。 Safari似乎错过了开放工具打开之前发生的任何错误/控制台日志。
  • Ionic 2 projects. Check you build out put for Typescript errors. You might be missing types for third-party modules.
  • Ionic 2项目。检查你为Typescript错误构建了put。您可能缺少第三方模块的类型。
  • 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.
  • 提示你的代码。通过linter运行代码。可能存在您没有看到的错误。一个linter将能够为你捕获这些。 V2项目应该使用离子的tslint规则,V1项目可以使用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.

还要确保你们都看看这些选项。这种错误通常是代码中出现一个小错误的原因。您需要调试并提供正确的信息。谢谢。

#1


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.

这是从模块的运行块调用的,并且分析不可用。解决方法是将$ window传递给工厂以使用分析。

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

#2


3  

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 :

我非常感谢您的回答,感谢您分享您的回答作为回复。我使用ionic2也遇到了同样的问题。仅显示白色屏幕。经过大量的搜索和头痛,我添加了一些变化,如添加间隙等。然后我得到几点在ios 10中获得离子构建:

  • CSP meta tags. Remove them if they're causing issues Errors in your code.
  • CSP元标记。如果它们导致问题,则删除它们代码中的错误。
  • 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.
  • 打开safari开发工具并检查设备。确保点击cmd-r重新加载应用程序。 Safari似乎错过了开放工具打开之前发生的任何错误/控制台日志。
  • Ionic 2 projects. Check you build out put for Typescript errors. You might be missing types for third-party modules.
  • Ionic 2项目。检查你为Typescript错误构建了put。您可能缺少第三方模块的类型。
  • 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.
  • 提示你的代码。通过linter运行代码。可能存在您没有看到的错误。一个linter将能够为你捕获这些。 V2项目应该使用离子的tslint规则,V1项目可以使用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.

还要确保你们都看看这些选项。这种错误通常是代码中出现一个小错误的原因。您需要调试并提供正确的信息。谢谢。