blank page on adding dependency to my starter app - javascript

I am new to ionic framework and trying to put the ngPDFViewer to my application. The error I get is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngPDFViewer due to:
Error: [$injector:nomod] Module 'ngPDFViewer' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
What I do
In index.html
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/pdf.compat.js"></script>
<script src="lib/pdf.js"></script>
<script src="lib/ng-pdfviewer.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/controllers.js"></script>
<script src="js/services.js"></script>
In app.js
angular.module('starter', ['ionic', 'ngPDFViewer', 'starter.controllers', 'starter.services'])
More information about ngPDFViwer here:
https://github.com/akrennmair/ng-pdfviewer/

Related

getting 404 error for bower components

I am trying to run my application using gulp task runner and i have installed few bower components and angular is one of them
When i try to run the application I am getting errors :
In index.html:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/bootstrap-accessibility-plugin/plugins/js/bootstrap-accessibility.js"></script>
<script src="bower_components/mediaelement/build/mediaelement-and-player.js"></script>
<script src="bower_components/angular-socialshare/dist/angular-socialshare.min.js"></script>
I have also included the path but still getting the same errors.
Test 404 error urls from console by run those into the browser. It will ensure that files were available in the location or not.
Use relative path in all files if index.html and bower_components are in same location.
Ex : ./bower_components/jquery/dist/jquery.js
When your angular code start executing, angular does not exist.
AngularJS: Uncaught ReferenceError: angular is not defined
you are trying to access a variable called angular which is not defined.
"Uncaught ReferenceError: angular is not defined".
For this error make sure you have the right version of NodeJS installed with respect to your project.
npm install -g node#7.10.1. whatever version you want after the # symbol.
You can check the version by node -v.
For Bower Components.
bower install .

Ionic undefined plugin from cordova

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

ngCordova [$injector:modulerr] error with Ionic

I'm trying to use ngCordova in my project. I've used bower and installed it, put the full lib/ngCordova/dist/ng-cordova-js path after my Ionic Bundle and before Cordova in my index.html and here is my module:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])
But this error appears:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngCordova due to: ......
I've put everything in the right place, updated everything, but this error keeps appearing, how can i solve it?
That error occurs when you do not correctly load the javascript. Try referencing the ngCordova lib in your index
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
see the last line. If that does not help we need more information. Post your index html code and the full error you get that you left out after 'due to:'...

In angularJS application reloading the page causes missing dependency errors

I have an angularJS application that uses the ui.bootstrap directives. The ui.bootstrap module is included in index as follows:
<!-- JQuery first -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Then bootstrap it -->
<script src="/lib/js/tinymce/tinymce.min.js"> </script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<!-- Then let AngularJS take the wheel -->
<script src="/angular/angular.js"></script>
<!-- add dependencies -->
<script type="application/javascript" src="lib/angular-bootstrap/ui-bootstrap.js"></script>
<script type="application/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="/lib/angular-ui-tinymce/src/tinymce.js"></script>
<script src="/lib/angular-route.min.js"></script>
<!-- App client -->
<script src="/app.js"></script>
<!--Controllers-->
This works as I'm clicking through the site normally, but when the browser's reload button is hit, I recieve the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module reviewModule due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=ui.bootstrap
Is this just a quirk of angular? I've had issues like this before with reloading. Is there a way to prevent the default action of reload events and handle them with routeProvider manually?
Notice the src="lib/angular-bootstrap/ui-bootstrap.js" does not begin with a slash. This causes the script to be referenced from the current directory, not the root directory. Changing all script tags to include the initial slash like this: src="/lib/angular-bootstrap/ui-bootstrap.js" fixes the problem by referencing your script's paths from the applications root directory.
it is probably result of some kind of race condition. Your app.js script loads faster than others so it gives you injector error.
Try loading dependencies on head and your app.js in body

Laravel Mix & AngularJS Fails to Load module

I'm using Laravel 5.5 and AngularJS 1.7 with laravel-mix but I'm facing issues. Angular fails to load module. Here's my code...
webpack.mix.js
mix.scripts([
'node_modules/angular/angular.js',
'resources/assets/js/admin.js'
], 'public/js/all.js');
admin.js
var app = angular.module("admin", []);
app.controller("AdminController", function($scope) {
$scope.doSomething = function(){
console.log('doing something....');
}
});
I have included an Angular module in the body of the template.
<body class="hold-transition skin-red sidebar-mini fixed" ng-app="admin">
And mixed js files into the footer of the Blade template.
<!-- jQuery 3 -->
<script src="{{asset('admin/bower_components/jquery/dist/jquery.min.js')}}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{{asset('admin/bower_components/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!-- AdminLTE App -->
<script src="{{asset('admin/dist/js/adminlte.min.js')}}"></script>
<script src="{{asset('js/all.js')}}"></script>
<!-- Optionally, you can add Slimscroll and FastClick plugins.
Both of these plugins are recommended to enhance the
user experience. -->
</body>
</html>
Then run ...
npm run dev or npm run watch
However, I'm still getting the same error...
jquery.min.js:2 Uncaught Error: [$injector:modulerr] Failed to
instantiate module admin due to: Error: [$injector:nomod] Module
'admin' is not available! You either misspelled the module name or
forgot to load it. If registering a module ensure that you specify the
dependencies as the second argument.

Categories

Resources