ng2-datetime：TypeError：$（...）。datepickerは関数ではありません

Question

ng2-datetime＃v1.1.4（RC5バージョンではありません）をインストールし、テストアプリケーションにdatetimeコンポーネントを追加しようとします。次のエラーが発生します。それが何であるか知っていれば助けてください。ありがとう。 NG2-日時のREADMEの指示通り

browser_adapter.js:84 TypeError: $(...).datepicker is not a function 
    at NKDatetime.init (http://localhost:3000/main.bundle.js:27185:59) 
    at NKDatetime.ngAfterViewInit (http://localhost:3000/main.bundle.js:27115:15) 
    at DebugAppView._View_Crud0.detectChangesInternal (Crud.template.js:1428:62) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/vendor.bundle.js:60655:20) 
    at DebugAppView._View_Crud_Host0.detectChangesInternal (Crud.template.js:40:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/vendor.bundle.js:60647:20) 
    at DebugAppView._View_ServicesMain0.detectChangesInternal (ServicesMain.template.js:376:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/vendor.bundle.js:60655:20) 
    at DebugAppView._View_ServicesMain_Host0.detectChangesInternal (ServicesMain.template.js:37:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/vendor.bundle.js:60647:20) 
    at DebugAppView._View_App0.detectChangesInternal (App.template.js:88:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/vendor.bundle.js:60655:20) 
    at DebugAppView._View_App_Host0.detectChangesInternal (App.template.js:40:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at ViewRef_.detectChanges (http://localhost:3000/vendor.bundle.js:47800:66) 
    at http://localhost:3000/vendor.bundle.js:34125:85 

Answer 1

あなたはjqueryのブートストラップ・DatePickerのプラグインが含まれていませんでした。

https://github.com/nkalinov/ng2-datetime#dependencies

npm install --save bootstrap-datepicker

or use the bundled version from src/vendor/bootstrap-datepicker

それは

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

を置くには十分だとそれが動作するはずです。

Answer 2

これはAlexander Ciesielskiの答えに対するコメントですが、私はそれについて十分な評判はありません。ごめんなさい。

私のアプリにはng2-datetimeがインストールされていて、「働いていました」（datepickerが動作していた、タイムピッカーはときどきしかない）。

その後、gulpを使ってangular-cliベータ15に切り替えました。多くの破損修正（Humpty Dumptyを一緒に置くのが好きです！）の後、元の質問のエラーを除いてもう一度作業しました。

「ブートストラップ日付ピッカーは」アレキサンダーの答えのようにインストールされていた：

npm install --save bootstrap-datepicker 

私がチェックし、それが生成JSバンドルに含まれていますが、私はまだエラーを取得します。

私はアレキサンダーの答えのように明示的なスクリプトタグを含めることを追加しました：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 

今では動作します。タイムピッカーはうまく動作しませんが、エラーは発生しません。timepicker.jsを明示的に含めることは役に立ちません。

これが役に立ちます。 node_modulesのパッケージの

バージョン：

ng2-datetime: 1.2.0 
bootstrap-datepicker: 1.6.4 
bootstrap-timepicker: 0.5.2 

Answer 3

私はWebPACKのと同じ問題を持って、 私はWebPACKのためのエントリを次のようしている

config.entry = { 
    webapp:['./client/main.js'], //application generated code will be here 
    polyfills:['./client/polyfills.browser.js'], //pollyfills will be here 
    vendor:['./client/vendor.browser.js'] //external vendor files will be here. 
}; 

は私のjQueryのはvendor.browserに追加されています。 TSファイル。次のコード

import { NKDatetime } from 'ng2-datetime/ng2-datetime'; 
@Component({ 
    ...  
    directives: [NKDatetime], 
}) 

は、app.module.tsファイルにあります。したがって、そこにjQueryをフェッチすることはできません。

私は以下の変更を加えました。

はvendor.tsファイルに次のコード

import { NKDatetime } from 'ng2-datetime/ng2-datetime'; 
export {NKDatetimeModule} //export the ng2 module from the vendor.ts file. 

を設定します。私app.module.tsファイルで

と

//import the exported ng2-datetime module here. 
import { NKDatetimeModule } from '../../vendor.browser'; 
@Component({ 
    ... 
    directives: [NKDatetime], 
}) 

。

、それが動作します...

Answer 4

これは、私は同じ問題を抱えてきた

import 'bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css'; 
import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js'; 
import 'bootstrap-timepicker/css/bootstrap-timepicker.min.css'; 
import 'bootstrap-timepicker/js/bootstrap-timepicker.js';