Angular-cli: Cant connect jQuery plugin

[nikitarakitin]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Windows 10

1. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.14
node: 5.12.0
os: win32 x64

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
2. The log given by the failure. Normally this include a stack trace and some
   more information.
   EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./InitOrderComponent class InitOrderComponent_Host - inline template:0:0
   ORIGINAL EXCEPTION: TypeError: jQuery(...).intlTelInput is not a function
   ORIGINAL STACKTRACE:

intlTelInput.js:15 Uncaught ReferenceError: jQuery is not defined(anonymous function) @ intlTelInput.js:15(anonymous function) @ intlTelInput.js:17
lang.js:310Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

1. Mention any other details that might be useful.

I want to use jQuery plugin (https://github.com/jackocnr/intl-tel-input), but i cant connect it. I think that library cant connect with jQuery, because i can use jQuery in my project only that way: let jQuery = require('jQuery'); require('jquery') not working.
My angular-cli.json:

{
"project": {
"version": "1.0.0-beta.11-webpack.8",
"name": "order-page"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../node_modules/intl-tel-input/build/css/intlTelInput.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/intl-tel-input/build/js/intlTelInput.js"
],
"environments": {
"source": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"dev": "environments/environment.dev.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"lazyRoutePrefix": "+"
}
}

package.json:

{
"name": "order-page",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/*_/_.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"core-js": "^2.4.0",
"intl-tel-input": "9.0.9",
"jquery": "^3.1.0",
"moment": "^2.15.0",
"ng2-bootstrap": "1.1.0",
"process-nextick-args": "^1.0.7",
"rxjs": "5.0.0-beta.11",
"ts-helpers": "^1.1.1",
"zone.js": "0.6.12"
},
"devDependencies": {
"@types/jasmine": "^2.2.30",
"@types/jquery": "^1.10.31",
"angular-cli": "1.0.0-beta.11-webpack.8",
"codelyzer": "~0.0.26",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.3",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "^2.0.0"
}
}

[ifaouibadi]

import * as $ from 'jquery';
window['$'] = window['jQuery'] = $;
this how i do it

[nikitarakitin]

cant find module 'jquery'

[ifaouibadi]

npm i --save jquery

[cricri92]

Is there any updates about this issue?

[nikitarakitin]

I am connect libraries using CDN, its working (jquery and jquery plugin)

[cricri92]

@nikitarakitin I'm not using CDN libraries. I did installation of the package via npm, then install @types/jquery, include it in angular-cli.json's scripts entry, script from node_modules folder. After that, in my code just import jquery: import * as $ from 'jquery'; and it's working for me.

[kiencoltech]

I got the same problem!
1. Install jquery using npm

npm install jquery --save

2 Install jQuery TypeScript autocomplete

npm install @types/jquery --save-dev
3 Adding to angular-cli.json
"scripts": [
"../node_modules/jquery/dist/jquery.min.js"
]

• In package.json

dependencies

"jquery": "^3.2.1",

4 I restart by : ng serve

But it is still occur message:

scripts.bundle.js:17 Uncaught ReferenceError: jQuery is not defined

Anyone have solve?

[iosifpetre18]

I had the same error, I solved it by updating node to latest version: https://nodejs.org/en/download/
then "npm cache --force clean" and then "npm install"

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}