无法在Angular 9中使用JavaScript库

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 install在我的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')