SystemJS 在 Angular 2 应用程序中找不到 JQuery

Question

我在我的 Angular 2 应用程序中集成了 JQuery，如下所示：

typings install dt~jquery --save --global

我可以看到 typings.json 已相应调整，但是当通过 npm start 运行应用程序时，我收到此错误消息：

GET http://localhost:3000/jquery 404 (Not Found)

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/jquery

Error: XHR error (404 Not Found) loading http://localhost:3000/jquery

有什么解决办法吗？

我的 index.html 中确实有 JQuery 作为依赖项：

 <!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

更新：我按照 Igor 的建议做了：我删除了 typings.json 中的条目并将依赖项添加到我的 package.json 中。我再次删除了 node_modules 和运行 npm install 的全部内容。我仍然遇到这些编译错误：

 node_modules/@types/jquery/index.d.ts(623,5): error TS2374: Duplicate string index signature.
 node_modules/@types/jquery/index.d.ts(2872,5): error TS2374: Duplicate string index signature.
node_modules/@types/jquery/index.d.ts(2873,5): error TS2375: Duplicate number index signature.
node_modules/@types/jquery/index.d.ts(3246,5): error TS2300: Duplicate identifier 'export='.
typings/globals/jquery/index.d.ts(3224,5): error TS2300: Duplicate identifier 'export='.

我不知道 how/why 我应该有一个重复的类型定义。这就是我的 package.json 最近的样子：

"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"@angular/upgrade": "~2.4.0",
"bootstrap": "^3.3.7",
"chart.js": "^2.4.0",
"core-js": "^2.4.1",
"ng2-webstorage": "1.4.2",
"primeng": "^1.1.1",
"reflect-metadata": "^0.1.9",
"rxjs": "5.0.0-rc.4",
"systemjs": "0.19.41",
"zone.js": "^0.7.4",
"@types/jquery": "2.0.34"

Answer 1

如果您使用的是 TypeScript 版本 2 或更高版本

从您的类型配置文件中删除 jquery 引用。现在首选使用 npm 来引入类型定义。
更新您的 package.json 文件并添加 "@types/jquery": "X.X.X",，其中 x.x.x 是您正在使用的版本。最新的是 2.0.34 (npm package).
删除打字稿代码中对 jquery 的任何 import 引用。
只需引用 jquery 就好像它已经加载了一样。 TypeScript 应自动获取 JQuery 的定义，无需执行任何其他操作。

请注意，即使可能没有对定义文件的项目引用，TypeScript 也会选择定义文件。只要定义文件存在于磁盘上项目文件夹中的任何位置，它就会被拾取。这也意味着，如果以前使用 typings 时仍然存在较旧的定义文件，则应将其删除，否则在 TypeScript 转译时会出现编译错误。

SystemJS 在 Angular 2 应用程序中找不到 JQuery

SystemJS cannot find JQuery in Angular 2 app

jquery

systemjs

angular