Angular: How can I use Velocity.js within my Angular application?

Question

I have used velocity.js in my own personal web sites but never within an angular application. I'm not an angular developer (yet) so please bear with me.

I am following the README file on the angular-velocity github page. But when I run my application, I am getting an error that I am missing the module.

Here is what my module declaration looks like:

var appModule = angular.module('app.module', ['module-one', 'module-two', 'angular-velocity']);

...

The error I get now is:

Module 'angular-velocity' is not available! You either misspelled the module name or forgot to load it.

Further reading I see this:

When installing from npm, it is assumed that VelocityJS will be installed and loaded before Angular Velocity.

Ok, so I installed (via npm) the velocity library. How do I include that in my list of dependancies?

Also this:

angular-velocity assumes that the Angular core and the additional ngAnimate module is loaded

So does that mean I need something like this?

var appModule = angular.module('app.module', ['module-one', 'module-two', 'ngAnimate', 'angular-velocity']);

But in the example, all that is listed is angular-velocity.

Nowhere in my project do I see individual script tags. I am assuming the project just reads the dependancies and grabs them from the package.json file? (Completely guessing).

This does not happen:

<script src="bower_components/velocity/velocity.min.js"></script>
<script src="bower_components/velocity/velocity.ui.min.js"></script
<script src="bower_components/angular-velocity/angular-velocity.min.js"></script>

Thank you for any suggestions!

GibboK · Accepted Answer · 2016-11-29 20:23:01Z

2

You can include velocity using CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

or using bower

bower install velocity

and add its references in the header from default folder bower_components.

If instead you use npm you can use:

npm install velocity-animate

and add its references in the header from default folder node_modules.

answered Nov 29, 2016 at 20:23

GibboK

74.3k149 gold badges453 silver badges676 bronze badges

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

1 Comment

J Agustin Barrachina Over a year ago

I tried adding the script to index.html but still getting error: Property 'velocity' does not exist on type 'JQuery<HTMLElement>'. I am new to angular too. I have installed npm install velocity-animate but how should I do the import? I think something like import velocity from velocity-animate but I don't finish to figure it out. I import it of course on the .ts file I use veolicy in.

Collectives™ on Stack Overflow

Angular: How can I use Velocity.js within my Angular application?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related