CODEWITHSUNDEEP
htmlcssangulartypescriptnode-modules
Ron Ransom
Ron Ransom

Reputation: 93

Angular 9 Typescript referencing node_modules to fix MIME error

I'm building a browser app in Angular 9 Typescript and am trying to implement the webdatarocks package so I can use pivot tables within a component of the app. I've installed webdatarocks and now have the following:

<!doctype html>
<html lang="en">
<html>
    <head>
        <meta charset="utf-8">
        <link href="/angular-app/node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
        <script src="/angular-app/node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
        <script src="/angular-app/node_modules/webdatarocks/webdatarocks.js"></script>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    </head> 
    
    <body>
        <app-wbr-pivot #pivot1 [toolbar]="true">
         Webdatarocks will appear here
        </app-wbr-pivot>
    </body>
</html>

Note this is NOT the index.html file. That file is separate and contains the styles etc. for the entire app, I'm trying to use webdatarocks within only one component of the app, so the above code is in the html file of a component. (Not sure if this is recommended as I'm pretty new to this, but I don't see why it shouldn't work?). When trying to run this, the styles are not applied because of the following error:

Refused to apply style from 'http://localhost:4200/angular-app/node_modules/webdatarocks/webdatarocks.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Now I understand this likely doesn't work because it's unable to match any routes to the url, so it's being read as an error page in html rather than a css file. My question is how to actually fix this? Do I have to somehow add this url to the routing module? Is there not a way to simply point to the needed library in node_modules? I tried adding

"./node_modules/webdatarocks/webdatarocks.min.css"
"./node_modules/webdatarocks/webdatarocks.toolbar.min.js",
"./node_modules/webdatarocks/webdatarocks.js"

to the styles and scripts in the angular.json file and it still doesn't work.

Thank you and please let me know if I can clarify anything!

Upvotes: 1

Views: 209

Answers (1)

Ron Ransom
Ron Ransom

Reputation: 93

Okay, I learned all I had to do is remove everything within the head tag and just add:

@import "webdatarocks/webdatarocks.min.css";

to the styles.css file and Angular took care of the rest.

Upvotes: 1

Related Questions