将 jQuery 组件添加到 Angular 6答案

【问题标题】：Adding a jQuery component to Angular 6将 jQuery 组件添加到 Angular 6
【发布时间】：2018-11-19 16:26:19
【问题描述】：

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

错误：ENOENT：没有这样的文件或目录，打开 C:\nodeprojects\node_modules\jquery\dist\jquery.min.js.

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

npm install jquery

' 并验证 jquery.min.js 位于上面列出的路径中。

修改了angular.json（Angular 6 不再有 'angular-cli.json' 文件）并在'scripts []' 部分添加了jquery.min.js 文件的相对路径。
我使用app.component 作为目标组件。在app.component.ts中输入declare var $: any;，在export class AppComponent implements OnInit()里面输入jquery自定义组件函数。

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

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

运行 localhost:4200 后，唯一会显示的 ui 元素是没有数据的下拉菜单。

【问题讨论】：

看看this
谢谢维卡斯。那个网站有帮助。我在 jQuery 库的路径中有两个前导点，但 node_modules 目录和 angular.json 文件位于同一级别，因此删除前导点解决了问题。编译没有错误！

标签： jquery angular angular-cli

【解决方案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”文件以确保是否安装了包。

【讨论】：

【解决方案2】：

我想通过 "scripts": ["src/jquery-ui.min.js"] of angular.json 加载位于我的 src 文件夹中的自定义 jquery-ui.min.js，就像 OPTION 1 建议的那样，但是对于某些角度路由配置，这不起作用（请参阅issue）。

在这种情况下，OPTION 2 有效：将带有 absolute url 作为脚本标记 的脚本添加到 src/index.html 文件的正文中。

【讨论】：

【解决方案3】：

参考以下链接：Medium.com - How to include and use jQuery in Angular CLI project

Angular 4+ 应用程序的答案。

首先使用npm安装jQuery如下

npm install jquery — save

第二次转到Angular CLI项目文件夹根目录下的angular.json文件，找到scripts: []属性，并包含jQuery的路径，如下所示

"scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]

注意：如果您想在您的应用程序中使用 bootstrap 或 https://materializecss.com，或者您的项目中已经有。

确保在包含引导 javascript 文件之前包含 jQuery，如下所示。由于 bootstrap 和 Materializecss javascript 文件需要 jQuery。

我使用了 Materializecss 并且还在样式中添加了CSS 文件。

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

【讨论】：