@types/jquery fail my compilation

Hi all,

I’m not sure it’s the good place for this ticket… Today, I ran nom update and my compilation fail. ERROR in /*****/node_modules/ng2-materialize/dist/textarea/textarea.directive.d.ts (21,27): Generic type 'JQuery<TElement, HTMLElement>' requires 2 type argument(s).

I found this: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17239. With this in my package.json "@types/jquery": "^2.0.47",, I fix the build process.

Maybe you can add it in your package.json?

[jfcere]

Hi @DarkIsDude,

When creating a new project there is actually a problem with the version of @types/jquery that is pulled via @types/materialize-css as it pull on the latest type version which is made for JQuery 3.

This will be fix in 1.5.0 but in the meanwhile the workaround is exactly what you did, install manually the right version of @types/jquery

Using yarn

yarn install @types/jquery@2.0.47 --save-dev

Or plain npm

npm install @types/jquery@2.0.47 --save-dev

[jfcere]

@Atticus29 I created a new angular application with the dependencies your provided but I had to make some changes so it can works.

Follow the +/- (green and red highlights) below to see the changes I made and the explanations under the snippet.

package.json

{
  "name": "data-jitsu",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
+   "@angular/animations": "^4.0.0",
    "@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",
    "@types/youtube": "0.0.29",
    "angular-froala-wysiwyg": "^2.7.2-1",
    "angular2-materialize": "^15.1.10",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
-   "jquery": "^2.2.4",
    "materialize-css": "^0.100.2",
    "ng2-materialize": "^1.7.2",
    "ngx-youtube-player": "0.0.41",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
-   "@angular/cli": "1.0.0",
+   "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/bootstrap": "^3.3.36",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^3.2.12",
    "@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.0.0",
    "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"
+   "typescript": "~2.3.0"
  }
}

2 versions of jquery installed

You have 2 versions of jquery (2.2.4 because it is specified in the packages.json file and 3.2.12 because it is a dependency of materialize-css) but you won’t need 2.2.4 anymore.

typescript version missmatch

@types/jquery requires typescript to be 2.3.0 at least (see reference here). But updating typescript to 2.3.0 means you need to update @angular/cli to 1.5.0 to match the required typescript version for the CLI.

@angular/animations package is missing

In order for the animations to work correctly you will need to install the @angular/animations packages.

Is running npm cache clean --force dangerous?

Not at all, it only removes the already downloaded packages from your disk which mean it will have to download it again next time packages are asked to be installed.