SystemJS cannot find JQuery in Angular 2 app

I integrated JQuery in my Angular 2 app as follows:

typings install dt~jquery --save --global

I can see that typings.json was adjusted accordingly, however when running the app via npm start I receive this error message:

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

Any ideas how to resolve this?

I do have JQuery as dependency in my index.html:

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

UPDATE: I did as suggested by Igor: I deleted the entry in typings.json and added the dependency to my package.json. I removed the entire content of node_modules and ran npm install again. Still I encounter these compilation errors:

 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='.

I have no idea how/why I should have a duplicated type definition. This is how my package.json recently looks like:

"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"

Solution

If you are using TypeScript version 2 or later

Remove the jquery reference from your typings configuration file. It is now preferred to use npm to pull in type definitions.
Update your package.json file and add "@types/jquery": "X.X.X", where the x.x.x is the version you are using. The latest is 2.0.34 (npm package).
Remove any import references to jquery in your typescript your code.
Just reference jquery as if it were already loaded. TypeScript should pick up the definition of JQuery automatically, no need to do anything else.

Note that TypeScript will pick up definition files even though there might not be a project reference to the definition file. As long as the definition file exists on disk anywhere in the project folder it will be picked up. This also means if there are older definition files that still exist from previous use of typings they should be deleted or you will get compilation errors when TypeScript transpiles.