Angular 1.7 ngAnimate Error: [$injector:unpr]

Howard Bash
Howard Bash used Ask the Experts™
on
I have an angular application housed in a web part on SharePoint 2016.  It works and has been working as required and I was recently asked to add an animation to a div.  When I add the reference to ngAnimate to the controller, it breaks.

(function () {
  angular.module("App", ["ngAnimate"])

etc..

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Are you including the animate .js file?

You can get it here

https://cdnjs.com/libraries/angular.js/
Howard BashSenior Software Engineer

Author

Commented:
I am including angular.js and angular-animate.js
Howard BashSenior Software Engineer

Author

Commented:
What is odd though, when I search the js files I see that ngAnimate has an info section where it refers to the version of angular as 1.7.8.
I am using Angular 1.7.5 and Angular-Animate 1.7.5.

My package.json contains the following:

    "angular": "^1.7.5",
    "angular-animate": "^1.7.5",

I read that the versions must match.  Not sure if the info section is a useful clue.  But, thought I should mention it.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Can you post your script includes?
Howard BashSenior Software Engineer

Author

Commented:
The scripts are bundled together via a gulp task.  The js file is definitely included in the app as I can debug into it from chrome debugger when the page loads.  Also,  the js file has angular.js bundled and without the controller line with ngAnimate,  the Angular runs and the controller handles the html/js functions as expected.  So the file(s) are definitely within the apps space.
Howard BashSenior Software Engineer

Author

Commented:
Also, please note that the bundled js file is over 19k lines.

Here is the gulp task:

gulp.task('bundle:vendorjs', function () {
  gulp.src([
    "node_modules/angular/angular.min.js",
    "node_modules/angular-animate/angular-animate.min.js",
    "node_modules/toastr/build/toastr.min.js",
    "node_modules/babel-polyfill/dist/polyfill.js"
  ])
		.pipe(concat("vendor.min.js"))
		.pipe(uglify())
		.pipe(gulp.dest("../dist/vendorjs"));
});

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
When you say it breaks - what is the nature of the break?
Is there anything in the console?
Howard BashSenior Software Engineer

Author

Commented:
The console error follows:

Error: [$injector:unpr] http://errors.angularjs.org/1.7.5/$injector/unpr?p0=spDataSvcProvider%20%3C-%20spDataSvc%20%3C-%20carouselController

Open in new window


And on the page I see {{some controller variable}} .
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
That seems to be referring to your CarouselController?
Howard BashSenior Software Engineer

Author

Commented:
Yup.  That is the controller and again it all works until I add ngAnimate to angular.module("App", ["ngAnimate"])
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Without being able to see it happening or the full listing - difficult to diagnose.

I have just built a 1.7.8 app with ngAnimate - and it works fine.

Most likely something you are doing is conflicting with the ngAnimate library OR something in the packing is causing an issue.

Have you tried it without packing your files?

For instance - instead of specifying your animate in your package.json - include it directly in your index file - what happens then?
leakim971Multitechnician
Top Expert 2014

Commented:
replace :
"node_modules/angular/angular.min.js",
    "node_modules/angular-animate/angular-animate.min.js",

Open in new window

by (not minified version) to get more details about your issue :
"node_modules/angular/angular.js",
    "node_modules/angular-animate/angular-animate.js",

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial