Error when injecting angular-animate.js

Question

I am receiving the following error when injecting angular-animate.js: Unknown provider: $animateProvider from ngAnimate

Here is my app.js:

var MyApp = angular.module("MyApp", ["ui.bootstrap", "ngAnimate"])

Here is head of index.html:

<html lang="en" ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="angular-animate.js"></script>
    <script type="text/javascript" src="ui-bootstrap-tpls-0.6.0.min.js"></script>
    <script type="text/javascript" src="controllers.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <title>My App</title>
</head>
<body ng-controller="AppCtrl" style="padding-bottom: 70px">

Bootstrap alone is loaded fine.

What am I doing wrong?

Here is the plnkr

Can you jsFiddle/plnkr the problem – smk Oct 16 '13 at 19:56 — smk, Oct 16 '13 at 19:56
@smk i edited the questions, added at the bottom, thanks – Bojana Šekeljić Oct 16 '13 at 20:06 — Bojana Šekeljić, Oct 16 '13 at 20:06

KayakDave · Accepted Answer · 2013-10-16T20:38:30.637

3

I got a different error with your code. I got a missing $routeProvider error.

As the first line of your app.js try this:

var MyApp = angular.module("MyApp", ["ngRoute", "ngAnimate", "ui.bootstrap"])

instead of

var MyApp = angular.module("MyApp", ["ngAnimate", "ui.bootstrap"])

And add it your header:

<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.js"></script>

By the way, using the non-minified version of Angular in plnkr.co gives a more human readable error message in these cases.

edited Oct 16 '13 at 20:38

answered Oct 16 '13 at 20:20

KayakDave

24,636
3
65
68

I used the google hosted code from the plnkr, in my local code and now i get the `Error: [$injector:modulerr]`... and error is the same when I add `"ngRoute"` – Bojana Šekeljić Oct 16 '13 at 20:31
Forgot to mention including it. I just added that- see if including angular-routes.js fixes it (looks like it works for me- leaving you with an error in AppCtrl). – KayakDave Oct 16 '13 at 20:39
Oh, and google hosts both a minified and non-minified version. Just remove the .min and you'll get nicer error messages (src="http://code.angularjs.org/1.2.0-rc.3/angular.js") – KayakDave Oct 16 '13 at 20:42
Here's a plunker with the changes I described: http://plnkr.co/edit/nni8MlsLGjIiI3BrkjMN?p=preview – KayakDave Oct 16 '13 at 20:45
Great, all fixed, except bootstrap is not executing now, do you think it's some inconsistencies beetween these two, or is it something i can fix on my end? thanks a lot! sorry – Bojana Šekeljić Oct 16 '13 at 21:23
Seems to work to me. I just added a bootstrap button and a bootstrap-ui button group to that plunker (so you can take a look). And both appear to work to me. Do you have an example of what's failing for you? – KayakDave Oct 16 '13 at 21:34

score 1 · Answer 2 · answered Oct 16 '13 at 20:20

You are declaring app.js before the angular-animate library. Try this:

<html lang="en" ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="angular-animate.js"></script>
    <script type="text/javascript" src="ui-bootstrap-tpls-0.6.0.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="controllers.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <title>My App</title>
</head>
<body ng-controller="AppCtrl" style="padding-bottom: 70px">

Error when injecting angular-animate.js

2 Answers2