導入ng2-datetime時遇到問題

我試圖將ng2-datetime導入到我的應用中，因爲它好像是唯一的datepicker彈出窗口，可以讓你限制日期範圍。無論如何，根據它的documentation，我通過npm安裝了ng2-datetime。導入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

如果這是一個難以逾越的問題，我願意接受任何其他日期選擇器，讓我限制最小和最大日期值。

來源

2016-09-14 Alex Kibler

請問您可以發佈您的webpack.config.js嗎？ – yurzui

@yurzui不，對不起，這只是我產生的默認CLI。我的項目中沒有實際的webpack配置 –

我有一個類似的問題。我通過安裝jquery類型定義來解決它。 npm install @types/jquery --save-dev

更多信息上：

typings install dt~jquery --global --save

來源

2016-09-25 16:29:28 michaelb

我用下面的命令修復它https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-jQuery

來源

2016-10-09 18:50:06 mapm

更新tsconfig.json文件

NPM安裝@類型/ jQuery的--save-dev

然後添加

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

需要導入一些庫：

進口 '引導/ DIST/CSS/bootstrap.css'; import'jquery/dist/jquery.min.js'; import'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css'; import'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js'; import'ng2-datetime/src/vendor/bootstrap-timepicker/css/bootstrap-timepicker.min.css'; import'ng2-datetime/src/vendor/bootstrap-timepicker/js/bootstrap-timepicker.js';

我使用的角度種子，所以我會配置這樣的：

"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' 
     } 
    },

來源

2017-02-10 07:25:02

一個快速簡便的解決辦法：

安裝"ng2-datetime": "1.2.1"
安裝"@types/jquery": "^2.0.33"
指定"types": ["jquery"]範圍內tsco nfig。json

這爲我解決了所有問題。

來源

2017-03-28 06:54:03 anusreemn

導入ng2-datetime時遇到問題

回答

相關問題