when im running my Ionic app inside iOS simulator,
and using the Safari Web inspector, i see this error:
file:///.../.../Application/.../myApp.app/www/lib/ionic/js/angular.min.js.map
Failed to load resource: The requested URL was not found on this server.
Anyone knows how to solve it?
Thanks.
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- Libraries -->
<script src="lib/moment/min/moment.min.js"></script>
<script src="lib/ng-lodash/build/ng-lodash.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/constants.js"></script>
<script src="js/config.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
</html>
I ended up importing ionic.bundle.js instead of ionic.bundle.min.js and the issue was gone
Related
I'm working on an ionic application with material design.
After taking a release built in PhoneGap and checking it on a mobile, it displays a blank white screen. It's already working in development as a debug APK. I don't know why it's not working on our my environment.
Below is my index.html:
<!-- script -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="lib/ionic-material/dist/ionic.material.min.js"></script>
<script src="lib/ion-md-input/js/ion-md-input.min.js"></script>
<script src="lib/ion-floating-menu/dist/ion-floating-menu.js" type="text/javascript"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/underscore.js"></script>
<script src="lib/sweet-alert/sweetalert-dev.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA_rECkai1SfPXFpmSXEqksKQaASuDHbOM&libraries=places&sensor=false">
</script>
<script src="lib/angular-google-places-autocomplete/dist/autocomplete.min.js">
</script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/service.js"></script>
<script src="js/service2.js"></script>
My html codeļ¼
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="mail.js" ></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
My JavaScript code:
var myapp=angular.module('mail', ['ngRoute']);
But I get
Uncaught Error: [$injector:modulerr]
Why?
Please load jquery library first then load angularjs library, then ngRouter library see following line
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="mail.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Load JS files in order jQuery>Bootstrap>angular>route>mail. Also verify the version number of angular, ng-route you are using in your application. If not sure, use cdn.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular-route.min.js
I am currently working on a Yeoman generated Angular project.
I'd like to force bower.json to only utilize a dependency's *.min.js file rather than the full *.js version. I'm sure this is relatively easy to configure but I can't seem to figure it out.
For example, the following is being automatically injected:
<script src="bower_components/angular-chart/angular-chart.js"></script>
Instead of:
<script src="bower_components/angular-chart/angular-chart.min.js"></script>
Here's the full HTML from the relevant section:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-utils-pagination/dirPagination.js"></script>
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/angular-spinner/angular-spinner.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/c3/c3.js"></script>
<script src="bower_components/angular-circular-navigation/angular-circular-navigation.js"></script>
<script src="bower_components/angular-chart/angular-chart.js"></script>
<!-- endbower -->
<!-- endbuild -->
Any assistance would be greatly appreciate. Thank you!
The idea is that when you are running it for development you want to use the non minified js so that if there are any issues you can read the source easily. To run for development you would just use:
grunt serve
Then when you are ready to deploy it you can just run:
grunt
This will produce a minified combined scripts/vendor.js. The ful build solution will be in the dist folder.
I am using jquery mobile with phonegap and angular JS. When include jquery Mobile, then nothing shown in android mobile and when remove jquery mobile evry thing work but cannot pick jquery-mobile.css. i think there is jquery confliction.
all files are includes as
<script type="text/javascript" src="vendors/onsen/js/onsenui.js"></script>
<script type="text/javascript" src="js/angular-carousel.js"></script>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/lodash.underscore.min.js"></script>
<script type="text/javascript" src="js/angular-google-maps.min.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/ui-map.js"></script>
<script type="text/javascript" src="js/angular-local-storage.js"></script>
<script type="text/javascript" src="js/angular-sanitize.js"></script>
<!-- NVD3 re-usable charting library (based on D3) -->
<script type="text/javascript" src="js/nvd3/d3.min.js"></script>
<script type="text/javascript" src="js/nvd3/nv.d3.min.js"></script>
<script type="text/javascript" src="js/nvd3/angular-nvd3.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<!--- Imager Assets -->
<script type="text/javascript" src="js/custom/jquery.mobile.js"></script>
<script type="text/javascript" src="js/custom/jquery.vintage.js"></script>
<script type="text/javascript" src="js/custom/jquery.cropper.js"></script>
<script type="text/javascript" src="js/custom/spoon.js"></script>
<!--- Images Assets -->
<script type="text/javascript" src="cordova.js"></script>
Whats wrong with this.
any help will be appreciated.
use the phonegap developer app http://app.phonegap.com/, and connect the application using that app, the app have console, so that you can see exactly what wrong.
but as per my experience with PhoneGap+AngularJs+JQueryMobile, we have to choose either AngularJS or JqueryMobile both are not working together as expected. other wise choose appropriate modules of JqueryMobile and use them.
Introducing requireJS into my angjlarJS app I asked myself what happens with the bower scripts and my application scripts(services etc...).
Do I have to remove all and configure every angular bower component and application scripts with requireJs config?
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/authenticationService.js"></script>
<!-- endbuild -->
<script src="scripts/vendor/linq.js"></script>
Due to how Angular.js loads dependencies that's not the greatest idea. Forcing the entire thing through RequireJS would mean a decent amount of Angular finicking, which isn't fun.
I would recommend instead to make sure all of those are minified (they don't look minified from the quote) and concatenate them all, then serve that big file.