Angular 4 + ng2-datetime jQuery 问题答案

【问题标题】：Angular 4 + ng2-datetime jQuery issueAngular 4 + ng2-datetime jQuery 问题
【发布时间】：2017-07-17 10:51:59
【问题描述】：

有人在 ng4 中使用 ng2-datetime 包有运气吗？我遇到了一个 jQuery 问题，如下所示：

ERROR in /Users/markoffden/Sites/ato-card-front/node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts (175,27): Cannot find name 'jQuery'.
/Users/markoffden/Sites/ato-card-front/node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts (176,37): Cannot find name '$'.
/Users/markoffden/Sites/ato-card-front/node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts (192,19): Cannot find name '$'.
/Users/markoffden/Sites/ato-card-front/node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts (196,27): Cannot find name 'jQuery'.
/Users/markoffden/Sites/ato-card-front/node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts (197,37): Cannot find name '$'.
/Users/markoffden/Sites/ato-card-front/node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts (224,19): Cannot find name '$'.

尽管我已遵循网络上所有公认的修复方法，例如：

npm install --save @types/jquery

包括：

"types": ["jquery"]

在我的tsconfig.json 中，但仍然收到此错误。

我正在使用 CLI。

UPD 而我的angular-cli.json 是

///...

"styles": [
    "../bower_components/bootstrap/dist/css/bootstrap.min.css",
    "../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css",
    "../bower_components/font-awesome/css/font-awesome.min.css",
    "sass/styles.scss"
],
"scripts": [
    "../bower_components/jquery/dist/jquery.min.js",
    "../bower_components/bootstrap/dist/js/bootstrap.min.js",
    "../bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
    "../bower_components/bootstrap-timepicker/js/bootstrap-timepicker.js"
]

///...

【问题讨论】：

在你使用 jquery 的组件中使用这个declare var $: any;
不幸的是，它没有帮助
declare var jQuery: any; 也用这个
你在scripts下angular-cli.json添加jquery了吗？
在 Angular 中使用 jQuery 通常是个坏主意。它们不适合彼此。

标签： javascript jquery angular angular-cli

【解决方案1】：

我认为ngx-datepiker 是目前最好的选择。切换到这个库。

【讨论】：

【解决方案2】：

我有同样的问题。我能找到的唯一解决方案如下。

步骤 1： 安装 jQuery 和类型

npm install jquery --save

npm install @types/jquery --save-dev

第 2 步： 将库添加到 .angular-cli.json

中的脚本中

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

第 3 步：将： /// <reference path="../node_modules/@types/jquery/index.d.ts" /> 添加到 src/typeings.d.ts 文件的顶部。

我首先尝试使用angular's approach for adding 3rd party libs，但没有成功。

【讨论】：

【解决方案3】：

如果你使用 angular-cli，请在 typings.d.ts 中添加：

declare var $: any;

declare var jQuery: any;

【讨论】：