jQuery 没有为 Angular 2 定义答案

【问题标题】：jQuery is not defined for angular 2jQuery 没有为 Angular 2 定义
【发布时间】：2017-06-07 16:35:53
【问题描述】：

我正在尝试使用 ng2-datetime。但是，当我按照说明安装 npm install --save ng2-datetime 时，出现以下错误。

我尝试运行以下 npm install 但它没有解决任何问题。

 npm install jquery --save 
 npm install @types/jquery --save-dev

我的 package.json 文件

  {
  "name": "timesheet-web-app",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.18",
    "angularfire2": "^2.0.0-beta.7",
    "bootstrap": "^4.0.0-alpha.6",
    "bootstrap-datepicker": "^1.6.4",
    "core-js": "^2.4.1",
    "firebase": "^3.6.6",
    "jquery": "^3.1.1",
    "ng2-datetime": "^1.2.2",
    "ng2-datetime-picker": "^0.12.7",
    "ng2-file-upload": "^1.2.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.39",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3"
  }
}

【问题讨论】：

你是用 webpack 还是你的模块打包器导入的？
我没有 webpack。我只是通过 npm install --save 安装所有东西，并且依赖项被加载到 node_module 文件中。
请张贴您的角码
我想忘了在 app.module.ts 中导入它。它是否包含在导入、声明或提供程序中？
您需要使用任何模块捆绑器。你使用 systemjs 吗？请发布您的package.json 文件

标签： javascript jquery node.js angular

【解决方案1】：

您需要使用angular-cli 导入jquery。编辑您的 angular-cli.json 文件。

找到script数组并添加jquery。

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

【讨论】：

嘿伙计。感谢您的回答。我在 SO 的某个地方看到过这个。但是，我的项目文件夹中没有该文件....
如果你使用angular-cli，你必须有这个文件。这是它的配置文件。
你可以在这里阅读更多关于全局库安装的信息：github.com/angular/angular-cli#global-library-installation
是的，你有那个文件。 :D i.gyazo.com/aafc7cef8467a1e9873e75bf7756c169.png
是的，伙计。对不起，我一定是瞎了眼。我正在考虑我在另一篇文章中看到的 system.config.js，但我没有。立即尝试解决方案！干杯

【解决方案2】：

浪费了很多时间，这是我所做的，没有帮助。

npm uninstall -g angular-cli
npm uninstall -g @angular/cli
npm cache clear --force
npm cache clean
npm install -g @angular/cli

以及所有其他常见的事情，

清除浏览器缓存
重启浏览器
杀死并重新运行 ng serve

就我而言，我必须执行以下操作：

npm install --save @types/jquery

在 .angular-cli.json 中导入 jquery

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

更改代码

import $ from 'jquery';

到

import * as jquery from 'jquery';

注意：问题从 4.2 升级到 5.2 后开始

【讨论】：

你在哪里写导入语句？我正在 AppModule 中编写它们，但没有成功。
在使用jquery的组件文件中
你的答案是正确的，但你知道为什么我们需要在脚本中指定 jQuery 以及为什么 bootstrap、popper 等不需要这样做吗？一旦使用 npm 安装，它们就可以工作，但 jQuery 不能？

【解决方案3】：

从'jquery'导入*为$；

窗口['$'] = 窗口['jQuery'] = $;

第二行将解决您的问题！

【讨论】：