Failed to load external scripts when running 'ionic emulate android' or 'ionic run android'

ionic-v1
1

Hi, I just started to learn Ionic last week. I followed the steps in https://blog.nraboy.com/2014/10/implement-google-maps-using-ionicframework/ . The code works well when I ran ‘ionic serve’ or ‘ionic emulate iOS’; the map can be displayed correctly. However, when I ran ‘ionic emulate android’ or ‘ionic run android’ (for both Genymotion and real Android device), the map failed to be displayed. I then saw the following error log through Chrome DevTools:

Failed to load resource: the server responded with a status of 404 (Not Found) http://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true

I then changed

script src=“lib/ionic/js/ionic.bundle.js”> in index.html to the following:

script src=“http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js”>

After changing, the code still works well in iOS emulator, but for Android emulator and real device, I see the following error log:

Failed to load resource: the server responded with a status of 404 (Not Found) http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true
Uncaught ReferenceError: angular is not defined

I have scratched my head for hours for this issue. Could you please help?

My system information:

OS: Mac OS X Yosemite
Node Version: v0.12.2
Cordova CLI: 5.0.0
Ionic CLI Version: 1.3.21
Xcode version: Xcode 6.3.1 Build version 6D1002
ios-sim version: 3.1.1
ios-deploy version: Not installed

My Samsung Galaxy phone runs Android 4.4.2.

2 Likes
2

Try adding this plugin:

ionic plugin add cordova-plugin-whitelist

otherwise http requests are blocked - as of the latest Cordova version.

10 Likes
3

Thank you sooooooo much! It works now by adding “cordova-plugin-whitelist”.

I think that loading external scripts is a fundamental function for most of apps. Just wonder why isn’t this plugin included in the Ionic’s Starter project?

4

I agree with Wang. I switched to ReactJS 3 days back as all my apps stopped working as of RC5 and nobody had a clue. This plugin should be part of the default templates as the Cordova Keyboard plugin.

I stay with Ionic btw :smile:

5

Not only I agree that it should be part of the defaults, I’ve actually submitted a pull request yesterday that does exactly that. Hopefully the Ionic guys will merge it.

The whitelist functionality was split into a separate plugin with the Cordova 5.0.0 release a couple of weeks ago, so it’s a new thing.

6

I have spent this rainy afternoon to manually pull the whitelist together. To be honest, it is more stubborn and protective than CORS in browsers. For dev purposes, I have opened the gates, you can squeeze the permissions more for production.

After installing the Cordova plugin, throw this in your index.html

<meta http-equiv="Content-Security-Policy"
      content="script-src * 'unsafe-eval';
                      connect-src * 'unsafe-eval';
                      object-src 'self';
                      style-src * 'unsafe-inline';
                      img-src *"
>

In the end, there is nothing wrong with RC5, only that the communication around the Cordova 5 compatibility and breaking changes compared to 4.3 was lacking to be honest. No offenses there.

1 Like
7

@encodedmirko I can’t install the latest plugin ! would you have any idea ? I amon the lastest Ionic nightly build, Cordova 3.7.1, and below is the error message :

image

8

@celiostat as mentioned above the whitelist plugin is new in Cordova 5.0.0, it won’t work and there’s no reason to install it anyway with older Cordova versions.

9

try this command

cordova plugin add https://github.com/apache/cordova-plugin-whitelist
10

i just added plugin whitelist, but maps doesn’t show in my device.
following error log:

Refused to load the script 'https://maps.googleapis.com/maps/api/js? …
ReferenceError: google is not defined

any solution? thanks before

11

Look at this tutorial: http://www.gajotres.net/using-cordova-geoloacation-api-with-google-maps-in-ionic-framework/

It has been tested, and it works successfully.

Also from my experience that error means incorrect security meta tag has been used. You’ll find a correct one in the provided tutorial.

12

i can’t open the link :frowning:

13

It’s working just fine. What’s your IP? Maybe I have it blacklisted.

14

Is that “React Native” or something like that? React is all the rage now but I have great trust in Ionic and with Angular 2.0 I expect it to be even better (as in, “blow the competition out of the water”).

15

see byjoost’s post Failed to load external scripts when running ‘ionic emulate android’ or ‘ionic run android’ for a solution to the error “No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.”

according to http://stackoverflow.com/questions/30212306/no-content-security-policy-meta-tag-found-error-in-my-phonegap-application you also need <allow-navigation href="http://*/*" /> in config.xml

16

if some online file loading failed, then the ionic app is getting crashed :frowning:
is there any solution for this ???

17

In my case it was the file name: it’s case sensitive so make sure all the file names are exact on your directory compared to the html

18

thank you man! you saved me day!!!