Angular 4 + ng2-datetime jQuery问题

Question

Does anybody have luck using ng2-datetime package with ng4? I am running into a jQuery issue as follows:

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 '$'.

Though I have followed all the accepted fixes for this around the web, such as:

npm install --save @types/jquery

and including:

"types": ["jquery"]

in my tsconfig.json , but still get this error.

I am using CLI.

UPD And my angular-cli.json is

///...

"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"
]

///...

Answer 1

I think that ngx-datepiker is the best option for now. Switched to this lib.

Answer 2

I had the same issue. The only solution I was able to find is below.

step 1: Install jQuery and types

npm install jquery --save

npm install @types/jquery --save-dev

step 2: Add the library to the scripts in .angular-cli.json

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

step 3: Add: /// <reference path="../node_modules/@types/jquery/index.d.ts" /> to the top of the src/typeings.d.ts file.

I tried using angular's approach for adding 3rd party libs first with no luck.

Answer 3

if you use angular-cli, add in typings.d.ts this:

declare var $: any;

declare var jQuery: any;