导入 ng2-datetime 时遇到问题答案

【问题标题】：Trouble getting ng2-datetime imported导入 ng2-datetime 时遇到问题
【发布时间】：2016-09-14 18:26:56
【问题描述】：

我正在尝试将 ng2-datetime 导入我的应用程序，因为它似乎是唯一可以让您限制日期范围的日期选择器弹出窗口。反正根据它的documentation，我通过npm安装了ng2-datetime。

然后我导入了文档中列出的 bootstrap-datepicker 和 bootstrap-timepicker。我还安装了 jQuery 并导入了 jQuery。然后我导入了NKDateTime 组件并将其添加到我的模块声明中。

我得到的只是

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:149:26
Cannot find name 'jQuery'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:150:36
Cannot find name '$'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:167:18
Cannot find name '$'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:171:26
Cannot find name 'jQuery'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:172:36
Cannot find name '$'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:198:18
Cannot find name '$'.

我正在使用angular2 RC7 和angular-cli: 1.0.0-beta.11-webpack.9-4

如果这是一个无法解决的问题，我愿意接受任何其他允许我限制最小和最大日期值的日期选择器。

【问题讨论】：

你能发布你的 webpack.config.js 吗？
@yurzui 不，抱歉，我猜这只是 CLI 生成的默认值。我的项目中实际上没有 webpack 配置

标签： angular webpack

【解决方案1】：

我遇到了类似的问题。我通过安装 jquery 类型定义解决了它。

typings install dt~jquery --global --save

【讨论】：

【解决方案2】：

我使用以下命令修复了它： npm install @types/jquery --save-dev

【讨论】：

【解决方案3】：

更新 tsconfig.json 文件

npm install @types/jquery --save-dev

然后添加

"types": [
//...., your code
"jquery" // <- add this
]

需要导入一些库：

导入'bootstrap/dist/css/bootstrap.css'; 导入'jquery/dist/jquery.min.js'；导入'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css'；导入'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js'；导入'ng2-datetime/src/vendor/bootstrap-timepicker/css/bootstrap-timepicker.min.css'；导入'ng2-datetime/src/vendor/bootstrap-timepicker/js/bootstrap-timepicker.js';

我正在使用 angular-seed，所以我会这样配置它：

"project.config.ts"

// Add `NPM` third-party libraries to be injected/bundled.
    this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
        { src: 'jquery/dist/jquery.min.js', inject: 'libs' },

      // {src: 'lodash/lodash.min.js', inject: 'libs'},
        { src: 'bootstrap/dist/js/bootstrap.min.js', inject: 'libs' },

        { src: 'bootstrap/dist/css/bootstrap.min.css', inject: true }, // inject into css section
        { src: 'bootstrap/dist/css/bootstrap-theme.min.css', inject: true }, // inject into css section
        { src: 'bootstrap/dist/css/bootstrap-theme.min.css.map', inject: true }, // inject into css section

        { src: 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js', inject: 'libs' },
        { src: 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css', inject: true },
        { src: 'ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.css', inject: true },
        { src: 'ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.js', inject: 'libs' },
    ];

// Add packages (e.g. ng2-translate)
let additionalPackages: ExtendPackages[] = [
    // required for dev build
    //....
    {
        name:'ng2-datetime',
        path:'node_modules/ng2-datetime/ng2-datetime.js',
        packageMeta:{
            main:"ng2-datetime.js",
            defaultExtension: 'js'
        }
    },

【讨论】：

【解决方案4】：

快速简单的修复：

安装"ng2-datetime": "1.2.1"
安装"@types/jquery": "^2.0.33"
在 tsconfig.json 中指定 "types": ["jquery"]

这为我解决了所有问题。

【讨论】：