add jquery to my page with angular-cli

Navigation
-1

I need to add jquery to initialize components of semantic ui to my project in angular-cli I have downloaded it by npm and I have added the path in the angular-cli.json but at the time of compiling I get it 

$ is not defined
    
asked by Antablack 04.05.2017 в 06:51
source

5 answers

0

I personally use angular with bootstrap 4, I have solved that conflict by adding a single line of code in the component that I need to use jQuery 

declare var $:any;
@component({
    selector: 'app-home',
    .....
})

Needless to say, you must have jQuery installed on the project.

Greetings:)

    
answered by 23.05.2017 / 01:24
source
0

I know this question has time but I will still give my opinion.

Taking into account that:

  • You need JQuery and not another plugin.
  • You included JQuery in the angular-cli.json file
  • You receive this message "$ is not defined"

    • Declaring the variable in TypeScript as indicated by Gersom you should be able to resolve.

      

    declare var $: any;

        
    answered by 13.08.2017 в 15:48
    0

    I use angular6 and it was a little complicated to use jquery but I found something that if you use layers, angle 6 can help you.

    Install 

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

    This is in the package.json only for angular6 

    styles": [
    "styles.css",
  ],
  "scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
  ]

    but in previous versions this was used in the package.json 

    styles": [
    "styles.css",
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
  ]
        
    answered by 05.07.2018 в 19:08
    0

    Good morning,

    It would help that you put code here, more data, screenshots ....

    Anyway, here are the steps to use semantic ui for Angular, which is what I recommend you use and not the normal library:

      

    link

        
    answered by 04.05.2017 в 15:18
    0

    this is my package.json 

    {
  "name": "SaveBPM",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "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",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "ng-semantic": "^1.1.13",
    "rxjs": "^5.1.0",
    "semantic-ui": "^2.2.10",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@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.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}
        
    answered by 05.05.2017 в 03:39
    Relate 2 databases [closed] How to pass data that a servlet gets from a BD to an HTML page? no JSP