Angular 9 Typescript 引用 node_modules 來修復 MIME 錯誤

Question

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. 我已經安裝了 webdatarocks，現在有以下內容：

<!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>

請注意，這不是 index.html 文件。 該文件是單獨的，包含整個應用程序的 styles 等，我試圖僅在應用程序的一個組件中使用 webdatarocks，因此上述代碼位於組件的 html 文件中。 （不確定是否建議這樣做，因為我對此很陌生，但我不明白為什么它不應該工作？）。 嘗試運行此程序時，由於以下錯誤，未應用 styles：

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.

現在我明白這可能不起作用，因為它無法匹配到 url 的任何路由，因此它在 html 而不是 ZC7A628CBA22E28EB17B5F5C6AE2A26 文件中被讀取為錯誤頁面。 我的問題是如何實際解決這個問題？ 我是否必須以某種方式將此 url 添加到路由模塊？ 有沒有辦法簡單地指向 node_modules 中所需的庫？ 我嘗試添加

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

到 styles 和 angular.json 文件中的腳本，它仍然不起作用。

謝謝，如果我能澄清任何事情，請告訴我！

Answer 1

好的，我了解到我所要做的就是刪除 head 標簽中的所有內容，然后添加：

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

styles.css 文件和 Angular 負責 Z65E8800B5C68002AAD896F888888B2A。

Angular 9 Typescript 引用 node_modules 來修復 MIME 錯誤

問題描述

1 個解決方案

解決方案1
1 2020-12-14 15:52:11

Angular 9 Typescript 引用 node_modules 來修復 MIME 錯誤

問題描述

1 個解決方案

解決方案1 1 2020-12-14 15:52:11

解決方案1
1 2020-12-14 15:52:11