Angular:jquery的scripts.bundle.js中意外的令牌导入 [英] Angular: Unexpected Token import in scripts.bundle.js for jquery

问题描述

我收到错误消息Uncaught SyntaxError: Unexpected identifier". Its take me to scripts.bundle.js , where it points to "import $ from 'jquery'

我已经通过npm安装了jQuery和jquery/types，并在angular-cli.json中导入了依赖项.

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

尝试过npm缓存验证(无效).

Tried npm cache verify (didn't work).

到目前为止，没有一种解决方案有效.

None of the solutions worked so far.

我用过

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.

错误

推荐答案

您需要执行以下几个步骤:

you need to do next few steps:

• npm install --save jquery

• 将jquery路径添加到.angular-cli.json中的scripts数组 像:

• npm install --save jquery

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

脚本":[ "../node_modules/jquery/dist/jquery.js"， ... ]

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

npm install --save-dev @types/jquery

将下一部分添加到tsconfig.app.json

类型":[ "jquery" ]

"types": [ "jquery" ]

在组件中导入jquery

从'jquery'中将*导入为$;

import * as $ from 'jquery';

就这样:)希望它能解决您的问题

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

这篇关于Angular:jquery的scripts.bundle.js中意外的令牌导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！