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


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


$http, IOS good, Browser good, Android bad
#2

Try adding this plugin:

ionic plugin add cordova-plugin-whitelist

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


Service call does not work in apk ionic
#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.


#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 :


#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!!!