Question

我正在尝试导入popper，jquery和chart.js之类的库以在有角度的项目中使用。

我使用cli下载了它们，并在我的index.html和angular.json文件中引用了它们。

index.html

<head>
...
<script src="node_modules/chart.js/dist/Chart.js"></script>
</head>

angular.json

...
"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.js"
            ]
...

出现的错误消息是

The resource from “http://localhost:4200/node_modules/chart.js/dist/Chart.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

Answer 1

以Chart.js为例：

npm install --save chart.js
npm install --save-dev @types/chart.js

然后在您的组件中：

import * as Chart from 'chart.js'

...

const chart = new Chart(...)

无需触摸index.html或将任何内容放入angular.json脚本中。

如何在angular中导入外部javascript库？

1 个答案: