Angular - refused to apply styles and scripts from Cropperjs

Question

At the moment im struggeling a little bit with Cropperjs. I have an dialog where i can upload an Image and crop it afterwards.

First i tried to apply the Cropperjs and CSS through the CDN link. This works fine but when i try to switch these links that i get the files from my node_modules my browser cant find these.

Refused to apply style from 'http://localhost:4200/node_modules/cropperjs/src/css/cropper.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. userprofile:12 GET http://localhost:4200/node_modules/cropperjs/dist/cropper.common.js net::ERR_ABORTED 404 (Not Found)

I have added the links in my index.html like this:

   <base href="/">
...
      <link  href="node_modules/cropperjs/src/css/cropper.css" rel="stylesheet">
    <script src="node_modules/cropperjs/dist/cropper.common.js"></script>

Have i applied these links wrong? And what is the difference between link the js and css through node_modules or fetch it from the CND link?

Answer 1

There is a proper way of adding these: angular.json.

Add as such:

"styles": ["src/styles.scss", "node_modules/cropperjs/src/css/cropper.css"],
"scripts": ["node_modules/cropperjs/dist/cropper.common.js"]

node_modules is not available in your build.