Ionic undefined plugin from cordova - javascript

I have an Ionic app and in the index.html file I have the following
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js" async="false"></script>
<!-- your app's js -->
<script src="js/app.js" async="false"></script>
<script src="js/controllers.js" async="false"></script>
<script src="js/services.js" async="false"></script>
The issue is that in cordova.js I have a plugin that does get initialized only after the controllers.js file is downloaded and executed, thus if I want to use that plugin in the controllers I can't because of an undefined error.
How can I make the controllers, app and services scripts load only after the cordova.js script has been downloaded and executed?
Thanks

Load it in this order
<script type="text/javascript" src="cordova.js"></script>
<script src="ionic.bundle.js"></script>
module
directive
service
controller

Related

When I deploy - Failed to load resource: the server responded with a status of 404 ()

Webpage error
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
I am not sure how get my css, bootstrap, and popper to display on the webpage when deployed. It works fine on local.
When you publish your site you don't have the node_modules folder on the server, don't worry you shouldn't have it there. Replace the node_modules with cdn links instead. You will find alot of cdn sources on cdnjs.com, but a few libraries have their own (like bootstrap), here is jquery for example https://cdnjs.com/libraries/jquery.
<!-- My links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

yeoman webapp: Minified JS for multiple HTML pages

I'm playing around with the yeoman webapp generator and want to have multiple minified JavaScript files for my individual subpages for my page. However, the webapp concats all JavaScript files to one "big" main.js which does not match my setup.
In my setup, main.js is supposed to be some kind of common JavaScript file for all pages but each page should have an additional JavaScript file with stuff that only relates to this page. E.g.
index.html -> uses main.js
subpage1.html -> uses main.js and subpage1.js
subpage2.html -> uses main.js and subpage2.js
The result from gulp build is a big main.js that contains the main.js, subpage1.js and the subpage2.js which leads to errors: if I open subpage1.html, subpage2.js (the one that is included in the big main.js) might try to access HTML nodes that only exist on subpage2.html but not on subpage1.html.
E.g.:
subpage1.html includes the big main.js with subpage2.js
<script src="scripts/main.js"></script>
which contains subpage1.js AND subpage2.js, however if I do the following in subpage2.js
$('#IdThatOnlyExistsOnSubPage2').someMethod(...)
this fails of course.
How do I have to adjust the Gulpfile to solve this problem?
JS and CSS builds are generating with uglify (formerly known as usemin) you could find more advanced options and features from their documentation but I think you should separate build block by your needs.
If you have a common JS file for every page, you have to put them together for each pages and create new block for page specific files.
Here is example.
<!-- build:js scripts/main.js -->
<script src="config.js"></script>
<script src="app.js"></script>
<!-- endbuild -->
<!-- build:js scripts/page-dashboard.js -->
<script src="dashboard-charts.js"></script>
<script src="dashboard-widgets.js"></script>
<script src="dashboard-main.js"></script>
<!-- endbuild -->
Also you could do same thing for CSS file builds.
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="app.css">
<!-- endbuild -->
<!-- build:css style/page-dashboard.css -->
<link rel="stylesheet" href="dashboard-charts.css">
<link rel="stylesheet" href="dashboard-widgets.css">
<link rel="stylesheet" href="dashboard-main.css">
<!-- endbuild -->

missing angular.js file in bower_componets/angular / path, getting angular.min.js.gzip file

I have created a project using the command
yo angular c3Chart
after successful scaffolding, In bower components i am getting angular.min.js.gzip file, for that getting error as "Uncaught ReferenceError: angular is not defined".
In index.html
<script src="bower_components/angular/angular.js"></script>
why this path is missing ,it has to come automatically after build. i tried adding manually it disappears after grunt serve command.
In index.html build:js is empty
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->

Path to the JS file getting disappeared

I am using node server to execute project. For executing projectevery time my process is execute following 3 commands in cmd
npm install
node server
grunt serve
I used pagination directive from Git-hub in my project, but the problem arising is that every time I initialize the project above way, the path given to pagination.js file gets disappear from index.html. I added this pagination module using
bower install angular-utils-pagination
I tried this with --save also, but the
<script src="assets/lib/angular-utils-pagination/dirPagination.js"></script>
this line is getting disappeared every time I start project, and I need to enter it manually.
Will you please help me solving this problem?
I see the problem. Like I state on the comment. you putting the script tag on wiredep scope build.
index.html
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="assets/lib/jquery/dist/jquery.js"></script>
<script src="assets/lib/angular/angular.js"></script>
<script src="assets/lib/angular-animate/angular-animate.js"></script>
<script src="assets/lib/angular-aria/angular-aria.js"></script>
<script src="assets/lib/angular-cookies/angular-cookies.js"></script>
<script src="assets/lib/angular-messages/angular-messages.js"></script>
<script src="assets/lib/angular-resource/angular-resource.js"></script>
<script src="assets/lib/angular-route/angular-route.js"></script>
<script src="assets/lib/angular-sanitize/angular-sanitize.js"></script>
<script src="assets/lib/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="assets/lib/angular-touch/angular-touch.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="assets/lib/angular-utils-pagination/dirPagination.js"></script>
<!-- endbower -->
<!-- endbuild -->
move your script tag after endbuild, then try to running 'grunt serve' again
...
<script src="assets/lib/angular-touch/angular-touch.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.js"></script>
<!-- endboser -->
<!-- endbuild -->
<script src="assets/lib/angular-utils-pagination/dirPagination.js"></script>
if you want it automatic build on wiredep process then add that on karma.conf.js
I think it locate on test directory. if you could provide me that file, I will show you how.

Bootstrap.js missing from dist folder after using Grunt command

I'm scaffolding a project with Yeoman and I encountered a problem recently. When I use grunt command on a command line to make distribution version of a project it modifies my index.html and deletes bootstrap.min.js script. Everything else stays the same, it just from some reason deletes that one line of code.
Anyone knows what's the problem?
In the webapp generator, all bootstrap.js files get concatenated into the plugins.js file.
If you look in your index.html file (in the app folder) you should see the block of code I've added here
note the build:js scripts/plugins.js - that's what tells grunt to concatenate the files into the plugins.js file
You can rename plugins.js to bootstrap.min.js in that line if you'd like
<!-- build:js scripts/plugins.js -->
<script src="../bower_components/headroom/headroom.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<!-- endbuild -->

Categories

Resources