Compilation error after integrating JQuery in Angular 2 app

1
votes

I have an Angular 2 project administered with npm and I recently ran

typings install dt~jquery --save --global

to add the JQuery type definition to my project.

npm then downloaded this type definition file to the directory node_modules as expected.

The problem is now that the Typescript compiler (using npm run tsc:w) complains:

$ npm run tsc:w

node_modules/@types/jquery/index.d.ts(3246,5): error TS2300: Duplicate identifier 'export='. typings/globals/jquery/index.d.ts(601,5): error TS2374: Duplicate string index signature. typings/globals/jquery/index.d.ts(2850,5): error TS2374: Duplicate string index signature. typings/globals/jquery/index.d.ts(2851,5): error TS2375: Duplicate number index signature. typings/globals/jquery/index.d.ts(3224,5): error TS2300: Duplicate identifier 'export='. 18:48:59 - Compilation complete. Watching for file changes.

Any ideas how to resolve this?

2
jqueryangulartypescript

2 Answers

3
votes

Transpiler gives duplicate definition error because you seem to have installed the definition files into multiple locations in your project:

node_modules/@types/jquery/index.d.ts
typings/globals/jquery/index.d.ts

Try to uninstall @types/jquery module by typing this line:

npm remove @types/jquery --save-dev
0
votes

I had the same error. I was following a udemy class on typescript.

He explained typings then @types, but really quick at the beginning of the @types video he says to

Delete 2 things:

  • the typings folder
  • typings.json

I totally missed him saying that the first time.

Also, my SystemJS was missing the map part (I didn't think it was necessary, but I guess it is.)

SystemJS.config({
    map: {
        "jQuery": "node_modules/jquery/dist/jquery.min.js"
    },
    baseURL: '/',
    packages: {
        '/': {
            defaultExtension: 'js'
        }
    }
});

Once I had all that in place, everything worked.