向Angular 6添加jQuery组件

Question

我在将jQuery级联下拉组件嵌入到Angular 6项目时遇到问题。尝试运行时出现错误ng serve：

错误：ENOENT：没有此类文件或目录，请打开C：\ nodeprojects \ node_modules \ jquery \ dist \ jquery.min.js。

这是我将jQuery添加到Angular 6的步骤：

1. 然

npm install jquery

”，并且经过验证jquery.min.js是在上面列出的路径中。

2. 已修改angular.json（Angular 6不再具有“ angular-cli.json”文件），并jquery.min.js在“ scripts []”部分中为文件添加了相对路径。

3. 我正在app.component用作目标组件。在中app.component.ts，我进入，declare var $: any;并在里面输入了jQuery自定义组件函数export class AppComponent implements OnInit()。

我尝试嵌入Angular的jquery组件位于https://jsfiddle.net/brohjoe/zgc0n1q5/1/

HTML已输入app.component.html。我删除了对脚本src的引用，因为已列出了缩小的jquery库，angular.json并且如上所述已嵌入了custom.js代码app.component.ts。

运行localhost：4200后，将显示的唯一ui元素是没有数据的下拉列表。

Answer 1

确保升级了最新的Angular CLI版本。要检查，请运行ng --version命令。

npm install -g @angular/cli@latest

要在您的项目node_modules中下载Bootstrap软件包，请使用此命令。它还将包括相关的jQuery。

npm install --save bootstrap

或者只是jQuery

npm install jquery --save

不要寻找“ Angular.json”文件，而是像下面这样在“ Projects：{...}”下编辑此脚本：

    "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.js",
      "node_modules/bootstrap/dist/js/bootstrap.js"
    ]

然后，您可以按照以下方式将jquery文件导入到app.module.ts文件中：

import * as $ from 'jquery';

完成上述任务后，如果您遇到相同的错误，请检查“ package.json”文件以确保是否安装了软件包。