Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

import jquery in angular4

in order to import jquery in an angualr4 project i do the following:

npm install --save jquery
npm install --save-dev @types/jquery

in the app.component.ts

import $ from 'jquery';
or 
import * as $ from 'jquery';

when run "ng serve" i got these errors

ERROR in C:/jquery-angular/jqueryintegration/node_modules/@types/jquery/index.d.ts (47,40): ',' expected.

ERROR in C:/jquery-angular/jqueryintegration/node_modules/@types/jquery/index.d.ts (2370,40): ',' expected.
.....
.....
.....
ERROR in C:/jquery-angular/jqueryintegration/node_modules/@types/jquery/index.d.ts (4311,85): ';' expected.

ERROR in C:/jquery-angular/jqueryintegration/node_modules/@types/jquery/index.d.ts (4311,92): Expression expected.

ERROR in C:/jquery-angular/jqueryintegration/node_modules/@types/jquery/index.d.ts (4455,1): Declaration or statement expected.

ERROR in C:/jquery-angular/jqueryintegration/node_modules/@types/jquery/index.d.ts (30,45): Generic type 'JQueryStatic<TElement, HTMLElement>' requires 2 type argument(s).
.....
.....
.....
ERROR in C:/jquery-angular/jqueryintegration/node_modules/@types/jquery/index.d.ts (4475,33): Generic type 'PlainObject<T, any>' requires 2 type argument(s).

ERROR in C:/jquery-angular/jqueryintegration/src/app/app.component.ts (2,8): Module ''jquery'' has no default export.

ERROR in C:/jquery-angular/jqueryintegration/src/app/app.component.ts (2,8): Module ''jquery'' has no default export.
webpack: Failed to compile.

my enviroment details:

>tsc --version
Version 2.3.2

>ng --version
@angular/cli: 1.0.3
node: 6.10.2
os: win32 x64

other dependecies:

 "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.3",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^3.2.3",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }

Does "import" load javascript file of default or must it be configured in some way?

like image 767
alex Avatar asked Jun 23 '17 09:06

alex


People also ask

Can I add jQuery in Angular?

Now to install jQuery Using NPM method, we need to create a new angular application by running the command at the VS Code Terminal. Here angular1 is the name of the application it will take a few seconds, but it will create the angular application with all the required files.

Why jQuery is not used in Angular?

It adds a lot to bundle size which is very bad for slow networks and CPUs (mobile!). Selectors and events are usually solved by libraries like React and Angular, so you don't need jQuery to help with browser compability and API differences.

Do you have to download jQuery?

If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).


2 Answers

Try this

import * as $ from 'jquery/dist/jquery.min.js';

like image 115
Bhargav Mummini Avatar answered Oct 27 '22 07:10

Bhargav Mummini


Install jquery package using npm following is the code to install jquery

npm install jquery --save

Add types

npm install --save-dev @types/jquery

Add scripts to angular-cli.json

"apps": [{
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js", // check your ref path it might be different.
  ],
}]

In component, you need to add

declare var jquery:any;
like image 26
HD.. Avatar answered Oct 27 '22 08:10

HD..