Can't get jQuery Working

[rakibler]

Using Angular RC7, angular-cli webpack.9-4, I can't get JQuery working. In my app.module, I've got

import 'jquery/dist/jquery.min.js';
import 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js';
import 'ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.js';

and then I import NKDatetime into my declarations.

When webpack runs, I get

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

No idea what I'm doing wrong.

[rakibler]

@rafalkasa Thanks for the response. I did add those typings (even though the latest version of the cli no longer requires a typings file since they're built-in to packages) but I'm still getting the exact same errors

[rakibler]

Also, I was looking at the demo and it imports NKDatetimeModule from '../src/ng2-datetime/ng2-datetime.module'. My version of ng2-datetime (1.1.5, latest on npm) doesn't have anything in NgModule format.

[grauschnabel]

Hi there, I removed the node_modules and typings folder and did a reinstall via npm and now I also get the messages:

/home/martin/Projects/lf/client/node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts(47,5): error TS7008: Member 'readonly' implicitly has an 'any' type.

/home/martin/Projects/lf/client/node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts(149,27): error TS2304: Cannot find name 'jQuery'.

/home/martin/Projects/lf/client/node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts(171,27): error TS2304: Cannot find name 'jQuery'.

I use the latest angular2-seed, where typings is now removed from the default installation.

[nkalinov]

Have you tried the latest version 1.2.0 ?

[grauschnabel]

Yes, i did.

[yonimoses]

Same here.. just tried it, same error.

[jlabaj]

Same here.

[xtreemrage]

I got the datepicker (did not use the time picker) working with the angular-cli. I use the following versions on windows 10:

node -v = 6.9.1
npm -v = 3.10.8
ng -v = angular-cli: 1.0.0-beta.18
"jquery": "^3.1.1"
"ng2-datetime": "^1.2.1"

Install the jquery types: npm install --save-dev @types/jquery.

Add the dependencies in your angular-cli.json file:

            "styles": [
                "../node_modules/bootstrap/dist/css/bootstrap.css",
                "../node_modules/font-awesome/css/font-awesome.css",
                "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css",
                "styles.css"
            ]

"scripts": [
                "../node_modules/jquery/dist/jquery.js",
                "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js"
            ]

Now you can add the import {NKDatetimeModule} from "ng2-datetime/ng2-datetime"; to your desired (child) Module.

This worked for me, I hope it helps.

[luigidallavalle]

I have the same issue with

• angular 2.1.2
• ng2-datetime 1.2.1

using webpack

[arfeifei]

after run npm install --save-dev @types/bootstrap, works for ng serve.
also add the following to karma.conf.js works for ng test
files: [ './node_modules/jquery/dist/jquery.js', './node_modules/bootstrap/dist/js/bootstrap.js', './node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js', './node_modules/ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.js', { pattern: './src/test.ts', watched: false } ],

[jadav1982]

I am also getting error of "cannot find name '$'"

[danielptm]

I got it to work after following Rafalkasa's advice and then xtreemrage's advice

[Olha]

npm install @types/jquery --save-dev

and then add

"types": [
"jquery"
]

in file tsconfig.json

[felipefmendes]

I've the same problem here :
error TYPESCRIPT /src/visual.ts : (36,26) Cannot find name 'JQuery'.

[miguellop1992]

if you use angular-cli, add in typings.d.ts this:
declare var $: any;
declare var jQuery: any;

[gildniy]

import * as $ from 'jquery' ==> in app.module.ts

[Darth-Vader-2020]

None of the above solutions worked for me. In fact, when I ran npm intall --save-dev, the entire thing exploded. Now, I get.

ERROR in ./node_modules/ng2-datetime/ng2-datetime.ts
Module build failed: Error: C:\1timesheet\client\mobile\node_modules\ng2-datetime\ng2-datetime.ts is not part of the compilation output. Please check the other error messages for details.
at AngularCompilerPlugin.getCompiledFile (C:\1timesheet\client\mobile\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:625:23)
at plugin.done.then (C:\1timesheet\client\mobile\node_modules@ngtools\webpack\src\loader.js:467:39)
at process._tickCallback (internal/process/next_tick.js:109:7)
@ ./src/app/app.module.ts 16:0-61
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

[gildniy]

FOLLOW THESE STEPS:

1. npm i jquery --save
2. npm i @types/jquery -D
3. import * as $ from 'jquery'---> in app.module.ts

That should do the trick and no need to put declare var jQuery: any; or declare var $: any; in each file.

[PeterGursky]

This is what worked for me (all the installation in Angular 5):
npm i ng2-datetime
npm i @types/jquery -D

in .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css",
"../node_modules/bootstrap-timepicker/css/bootstrap-timepicker.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
"../node_modules/bootstrap-timepicker/js/bootstrap-timepicker.js"
],

in app.modules.ts:
import { NKDatetimeModule } from 'ng2-datetime/ng2-datetime';

imports: [ ... NKDatetimeModule ],

and in src\tsconfig.app.json:
"compilerOptions": {
...
"types": [
"jquery"
]
},
"include": [
"**/*.ts",
"../node_modules/ng2-datetime/ng2-datetime.ts"
],
"exclude": [...]