SOLVED!!! It was an incompatibility in Angular that I wasn’t aware of because last time I built an Ionic/Angular app, this wasn’t an issue. Here’s the fix.
- Your index.html must have a Content-Security-Policy meta tag to make the browser AND the Cordova whitelist plugin happy (it was actually Cordova that threw an error when I temporarily removed it for testing purposes).
- It is also necessary to include the proper directives in config.xml, to make the Cordova whitelist plugin happy.
- You also must use the ng-csp attribute. (I wasn’t.)
Angular has some features that can break certain CSP (Content Security Policy) rules.
If you intend to implement these rules then you must tell Angular not to use these features.
This is necessary when developing things like Google Chrome Extensions or Universal Windows Apps.
The following rules affect Angular:
unsafe-eval: this rule forbids apps to use eval or Function(string) generated functions (among other things). Angular makes use of this in the $parse service to provide a 30% increase in the speed of evaluating Angular expressions.
unsafe-inline: this rule forbids apps from inject custom styles into the document. Angular makes use of this to include some CSS rules (e.g. ngCloak and ngHide). To make these directives work when a CSP rule is blocking inline styles, you must link to theangular-csp.css in your HTML manually.
If you do not provide ngCsp then Angular tries to autodetect if CSP is blocking unsafe-eval and automatically deactivates this feature in the $parse service. This autodetection, however, triggers a CSP error to be logged in the console:
Old, broken index.html:
<body class="greenroom" ng-app="greenroom">
Working index.html:
<body class="greenroom" ng-csp ng-app="greenroom">