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
– smk

2013-10-16 19:56:04 +00:00
Commented Oct 16, 2013 at 19:56 — smk
– smk, Commented Oct 16, 2013 at 19:56
@smk i edited the questions, added at the bottom, thanks

Bojana Šekeljić
– Bojana Šekeljić

2013-10-16 20:06:16 +00:00
Commented Oct 16, 2013 at 20:06 — Bojana Šekeljić
– Bojana Šekeljić, Commented Oct 16, 2013 at 20:06

KayakDave · Accepted Answer · 2013-10-16 20:38:30Z

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, 2013 at 20:38

answered Oct 16, 2013 at 20:20

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Bojana Šekeljić Over a year ago

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"

KayakDave Over a year ago

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 Over a year ago

Oh, and google hosts both a minified and non-minified version. Just remove the .min and you'll get nicer error messages (src="code.angularjs.org/1.2.0-rc.3/angular.js")

KayakDave Over a year ago

Here's a plunker with the changes I described: plnkr.co/edit/nni8MlsLGjIiI3BrkjMN?p=preview

Bojana Šekeljić Over a year ago

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

|

Fourth · Accepted Answer · 2013-10-16 20:20:00Z

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">

Collectives™ on Stack Overflow

Error when injecting angular-animate.js

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related