CODEWITHSUNDEEP
javascriptangular
Shubham
Shubham

Reputation: 143

Unable to use JavaScript Library in Angular 9

angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
              "node_modules/arrive/src/arrive.js",
              "node_modules/moment/moment.js",
              "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
              "node_modules/bootstrap-notify/bootstrap-notify.js",
              "node_modules/chartist/dist/chartist.js",
              "node_modules/vanilla-tilt/src/vanilla-tilt.js" // This ONE!!!
            ]

https://micku7zu.github.io/vanilla-tilt.js/ Vanilla Tilt JS

I am unable to install this library and use it in my component despite declaring it in my package.json file via using npm install. I have tried pasting CDN link in index.html as well, but both fail to work.

Upvotes: 1

Views: 1344

Answers (2)

Marc
Marc

Reputation: 1886

You can't use a js from node_modules in your index.html. The index.html 'lives' in the browser, the browser has no access to node_modules.

You can try to import from an cdn in your index.html.

Give this a try:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js"></script>

You can do the same with the vanilla-tilt.js. Copy it to assets/js folder and try to use this:

<script src="assets/js/vanilla-tilt.js"></script>
// or for a quick test:
<script src="https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.min.js"></script>

But: Disadvantage: these js files will not concatinated (and not minified) by build process.

Upvotes: 1

brk
brk

Reputation: 50291

Open the node modules and check if they are correctly installed. Once installed you can import the library in your application for example for jquery in component you can do like this 

import * as $ from 'jquery';

and use $ and jquery methods

Similarly you can do with other libraries like 

import * as moment from 'moment'

then use moment(someValue).format('L')

Upvotes: 0

Related Questions