無法在 Angular 中使用 JavaScript 庫 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/香草傾斜JS

盡管通過使用 npm 安裝在我的 package.json 文件中聲明它，但我無法安裝此庫並在我的組件中使用它。 我也嘗試在 index.html 中粘貼 CDN 鏈接，但都無法正常工作。

Answer 1

您不能在 index.html 中使用來自 node_modules 的 js。 index.html 在瀏覽器中“存在”，瀏覽器無法訪問 node_modules。

您可以嘗試從 index.html 中的 CDN 導入。

試試這個：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js"></script>

你可以對 vanilla-tilt.js 做同樣的事情。 將其復制到 assets/js 文件夾並嘗試使用它：

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

但是：缺點：這些 js 文件不會被構建過程連接（也不會縮小）。

Answer 2

打開節點模塊並檢查它們是否已正確安裝。 安裝后，您可以在應用程序中導入庫，例如 jquery 在組件中，您可以這樣做

import * as $ from 'jquery';

並使用$和 jquery 方法

同樣，您可以使用其他庫，例如

import * as moment from 'moment'

然后使用moment(someValue).format('L')