Question

我遇到了将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的引用，因为如上所述，angular.json中列出了缩小的jquery库，并且如上所述，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”文件，以确保是否已安装软件包。

Answer 2

我想通过“脚本”加载位于我的src文件夹中的自定义jquery-ui.min.js：像python-docs-samples这样的angular.json的[“ src / jquery-ui.min.js”]建议，但对于某些角度路由配置则无效（请参见OPTION 1）。

在这种情况下，issue起作用：将具有绝对URL作为脚本标记的脚本添加到 src / index.html 文件的正文中。 / p>

Answer 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文件，找到脚本：[]属性，并按如下所示包含jQuery的路径

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

注意：如果要在应用程序中使用引导程序或https://materializecss.com，或者您已经在项目中使用它。

请确保在包含引导javascript文件之前先包含jQuery，如下所示。由于引导程序和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"]

将一个jQuery组件添加到Angular 6

3 个答案: