I try to use ngAnimate module to create a simple animation. The problem is that every time I try to just include this module as a dependency I got this error: Error: Unknown provider: $animateProvider from ngAnimate.
The code is very simple, but I can't get what is the problem.
Here is my HTML template:
<html>
<head>
<script type="text/javascript" src="/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/js/lib/angular-animate.js"></script>
<script type="text/javascript" src="/js/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="/js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="/js/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/js/lib/underscore-min.js"></script>
</head>
<!-- And so on -->
</html>
And I include ngAnimation in my module like this:
var myModule = angular.module('myModule', ['ngCookies', 'ngResource', 'ui.router', 'ngAnimate']);
Quite simple. Everything is like in this tutorial, nothing special. But it doesn't work. The same problem was on stackoverflow here, but useless...
So, can anybody explain me what is the problem?
All in all the problem was fixed by migrating to 1.2.13 version of AngularJS. I think that this error was occured bacause 1.0.8 doens't support it (or maybe it was some thing else).
I fixed this error by updating to angular 1.2.13. Seems that for me was due to mismatching versions between angular 1.0.8 etc.
In my experience, this type of error is usually due to wrong file references. Are you sure the path to angular-animate.js is correct? does it point to the right file? is the file present in your directory?
Quoting another answer that helped me for future watchers of this post:
https://stackoverflow.com/a/24766563/1366216
Ran into the same problem. You have to match the version of angular to angular animate.
change:
"angular-animate": "1.2.6"
Crux is that you need to match angular version with angular-animate version.
Related
I am using Laravel for a project, with Laravel Mix compiling my JS and SCSS.
On one of the pages I have a portfolio filter, I want to use Metafizzy's Isotope as it has worked perfect in previous projects.
I included jQuery, followed by the isotope package locally, and finally my main.js file, all of which are before the closing body tag.
I'm using the exact same javascript code from this Codepen Demo in my main.js file: https://codepen.io/desandro/pen/JEojz
However I get the following error in my console:
Uncaught TypeError: $(...).isotope is not a function
I have tried placing my main.js file before and after the isotope package:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
I have also tried installing via npm and adding the following to my main.js file:
var Isotope = require('isotope-layout');
No matter what I do, I get the same error and I'm not sure how to get this working with my Laravel project. Any help would be appreciated.
Looks like I forgot to wrap it in $(document).ready(function() {...})
I'm using Laravel and in my bootstrap.js file I have
window.ProgressBar = require('progressbar.js');
and then I require the bootstrap.js file into app.js
require('./bootstrap');
And I use webpack.mix.js to compile it
mix.js('resources/assets/js/app.js', 'public/js')
If I attempt to access progressbar.js inside of app.js it works perfectly.
However, If I attempt to use it outside of app.js in script tag that comes after app.js on my pages, ProgressBar is undefined.
How can I access ProgressBar outside of my app.js but keep it imported via app.js ?
Example on index.blade.php
<script src="app.js" defer></script>
<script>
const progress = new ProgressBar; //undefined...
</script>
I had defer on the script tag and for some reason that stopped it from working.
Solution:
<script src="app.js" defer></script>
change to
<script src="app.js"></script>
I think, that Webpack hides ProgressBar from you, even if you have ProgressBar assigned to the window. Because you know, Webpack thinks that the bundle has all the code of your app. Solution? Not to bundle it! Instead use minified version of ProgressBar and just load it like in good old times. It is perfectly OK, few nanoseconds better or worse, not noticeable.
I'm working on an AngularJS application, and I tried to add Angular Animate.
Angular Route didn't cause any problem, but it seems Angular Animate is not compatible with something in my app.
I load the libs in this order:
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
And use them in my app.js:
var app = angular.module('tictactoe', ['ngRoute', 'ngAnimate']);
I'm getting the following error. JQuery and Angular (Vanilla + Route + Animate) have been installed with npm
Dependencies versions:
Use angular version 1.6.5 or downgrade angular-animate version to 1.6.4 It'll solve the issue.
Here's a plunk of some angular app example in which this dependency condition can be verified (just change versions of libraries in cdn link)
https://plnkr.co/edit/v0cLmZvYAC8m1J7JdwHf?p=preview
Please downgrade to version angular animate 1.6.4.
Here are the file you should also download it from that link. it works for me.
https://code.angularjs.org/1.6.4/
Also change bower.json (angular-animate/bower.json)
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
When I run the SpecRunner HTML file I get this error.
Looking around, this is due to angular-mocks.js not being referenced. In my case it is being referenced.
SpecRunner.html:
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="lib/angular-mocks.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="../main/static/js/controllers/norm-definitions-controller.js"></script>
When the tests are run, I get this exception: ReferenceError: inject is not defined
I can see that angular-mocks.js is referenced and it's not a caching issue as I can see it using Firebug.
Looking in angular-mocks.js I can see the full reference angular.mock.inject = function() { ... }, I've tried this as a reference too, and get the exception ReferenceError: angular is not defined.
You still need angular.js lib. I didn't saw it among your scripts. It should be before angular-mock.js.
For the errors which come while adding karma and jasmine to testing your project, make sure that
your angular.js and angular-mocks js files both have same versions.
the jasmine version is compatible with angularjs version, refer to jasmine official site to make sure there is no syntax error.
refer to test formation on angular js official site to follow unit testing methodologies.
The above steps help avoid most of the common errors.