CODEWITHSUNDEEP
jqueryangular
Anand Kumar
Anand Kumar

Reputation: 21

Angular: Unexpected Token import in scripts.bundle.js for jquery

I am getting error as Uncaught SyntaxError: Unexpected identifier". Its take me to scripts.bundle.js , where it points to "import $ from 'jquery'

i have installed jQuery and jquery/types through npm, as well as imported the dependencies in angular-cli.json.

Tried npm cache verify (didn't work).

None of the solutions worked so far.

I used 

import * as jQuery from 'jquery'; and used it, however even after commenting out all the jquery, " import $ from 'jquery' " is still there.

    Dependencies:
    "private": true,
      "dependencies": {
        "@angular/animations": "^5.0.1",
        "@angular/common": "^5.0.1",
        "@angular/compiler": "^5.0.1",
        "@angular/compiler-cli": "^5.0.1",
        "@angular/core": "^5.0.1",
        "@angular/forms": "^5.0.1",
        "@angular/http": "^5.0.1",
        "@angular/platform-browser": "^5.0.1",
        "@angular/platform-browser-dynamic": "^5.0.1",
        "@angular/platform-server": "^5.0.1",
        "@angular/router": "^5.0.1",
        "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.7",
        "angular2-jwt": "^0.2.3",
        "bootstrap": "^4.0.0-beta.2",
        "core-js": "^2.4.1",
        "jquery": "^3.2.1",
        "ng2-bootstrap-modal": "^1.0.1",
        "ng2-img-cropper": "^0.9.0",
        "ng2-slim-loading-bar": "^4.0.0",
        "ng2-trim-directive": "^2.1.0",
        "ng2-validation": "^4.2.0",
        "ngx-bootstrap": "^2.0.0-beta.11",
        "popper.js": "^1.12.9",
        "rxjs": "^5.5.2",
        "typescript": "^2.6.1",
        "zone.js": "^0.8.14"
      },
      "devDependencies": {
        "@angular/cli": "1.5.0",
        "@angular/compiler-cli": "^5.0.0",
        "@angular/language-service": "^5.0.0",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/jquery": "^3.2.17",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.2.0",
        "html-webpack-plugin": "^2.30.1",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "raw-loader": "^0.5.1",
        "ts-loader": "^3.2.0",
        "ts-node": "~3.2.0",
        "tslint": "~5.7.0",
        "tslint-loader": "^3.5.3",
        "typescript": "^2.4.2"
      }
    }

Any help in this regard will be highly appreciated. Thanks. Anand.

error

Upvotes: 0

Views: 1014

Answers (1)

Bassem Mamar
Bassem Mamar

Reputation: 328

you need to do next few steps:

  • npm install --save jquery

  • add jquery path to scripts array in .angular-cli.json like:

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

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

  • add next section to tsconfig.app.json

    "types": [ "jquery" ]

  • in your component import jquery

    import * as $ from 'jquery';

and that's it :) hope it solve your problem

Upvotes: 1

Related Questions