Unable to use JavaScript Library in Angular 9

Question

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.

Answer 1

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.

Answer 2

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')