typescript 在 angular4 中导入 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44717488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
import jquery in angular4
提问by alex
in order to import jquery in an angualr4 project i do the following:
为了在 angualr4 项目中导入 jquery，我执行以下操作：
npm install --save jquery
npm install --save-dev @types/jquery
in the app.component.ts
在 app.component.ts 中
import $ from 'jquery';
or
import * as $ from 'jquery';
when run "ng serve" i got these errors
运行“ng serve”时出现这些错误
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?
“导入”是加载默认的 javascript 文件还是必须以某种方式进行配置？
回答by Bhargav Mummini
Try this
试试这个
import * as $ from 'jquery/dist/jquery.min.js';
import * as $ from 'jquery/dist/jquery.min.js';
回答by HD..
Install jquery package using npm following is the code to install jquery
使用 npm 安装 jquery 包以下是安装 jquery 的代码
npm install jquery --save
Add types
添加类型
npm install --save-dev @types/jquery
Add scripts to angular-cli.json
将脚本添加到 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;
