Laravel Mix & AngularJS Fails to Load module - javascript

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.

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 .

Module angular-stripe is not available or Stripe must be available as window.Stripe

I have angular-stripe.js in my project(not sure where it came from someone else included it) an excerpt of which is below
var Stripe = window.Stripe
module.exports = angular.module('angular-stripe', [
_dereq_('angular-assert-q-constructor')
])
.constant('Stripe', Stripe)
.provider('stripe', provider)
.name
when I include this file I get the below error
Error: Stripe must be available as window.Stripe
I downloaded angular-stripe in npm which gave me a structure like this
src/index.js has the same code in it as above and includes the other files in source with a require and when I include it I get this error
Error: [$injector:nomod] Module 'angular-stripe' is not available!
Can anyone see what I'm doing wrong or know how to properly include angular-stripe?
Update
I'm including one of the following scripts in my html like this
<!-- <script src="assets/libs/stripe/angular-stripe.js"></script> -->
<script src="assets/libs/stripe/index.js"></script>
I get the error for window.Stripe if I include angular-stripe.js and the error for the module not being available if I include index.js. I can see one or the other in chrome developer tools when I load the page. We are using grunt but in our gruntfile we don't include any files from node_modules we just use it to uglify and minify our static resources.
Update
When I include it like this
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="assets/libs/stripe/angular-stripe.js"></script>
it works, but when I minifiy it I get the below error
Error: [$injector:nomod] Module 'angular-stripe' is not available!
I think because it doesn't make that call to https://js.stripe.com(its not in the network data in chrome developer tools).
If I download the content of https://js.stripe.com/v2/ into a file stripe-v2.js and then include it like this
<script src="assets/libs/stripe/stripe-v2.js"></script>
<script src="assets/libs/stripe/angular-stripe.js"></script>
it works before minification but fails with the same module not available error when I try to use the minified js.
You're missing a reference to angular-stripe. The script either needs to be sourced in the HTML before your script is sourced.
<script src="scripts/angular-stripe.min.js">
<!-- source your script after this -->
Additionally, depending on whether you're using a build system (grunt, gulp, webpack, etc) that path would be included into the build instead, either from the bower_components or node_modules paths.
gulp.src([
'node_modules/angular-stripe/angular-stripe.js'
])
Note that both of those are examples, the paths may differ but they have to be set to suit your environment. Without it, the angular-stripe script won't be loaded and your script won't work.

blank page on adding dependency to my starter app

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/

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

Categories

Resources