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.

What happens if you use the dist file instead of the source one ? (vanilla-tilt/dist/vanilla-tilt.min.js) — Seblor
– Seblor, Commented May 25, 2020 at 9:06
is your error, that it's not bundled or that you can not use it in your code? — Argee
– Argee, Commented May 25, 2020 at 9:06
theres no error in console, but its not working in code either. @argee — Shubham
– Shubham, Commented May 25, 2020 at 9:06
Put the library name in package.json and with version you want to install and do npm install — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented May 25, 2020 at 9:06

Marc · Accepted Answer · 2020-05-25 09:17:23Z

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.

edited May 25, 2020 at 9:17

answered May 25, 2020 at 9:06

Marc

1,8961 gold badge11 silver badges16 bronze badges

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

1 Comment

Shubham Over a year ago

Copying the script tag with just .js file does not display error neither does it work. And githubusercontent displays "The resource from

“https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.min.js” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff)."

in console

brk · Accepted Answer · 2020-05-25 09:12:53Z

0

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

answered May 25, 2020 at 9:12

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

Unable to use JavaScript Library in Angular 9

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related