Using jQuery in TypeScript (in an angular 2 project)

Question

Hi I have written some jQuery in one of my .ts angular components, but I can't seem to get it to work. I want to make a table scrollable. Here is the jQuery

var $table = $('table.users'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

    // Adjust the width of thead cells when window resizes
    $(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });
}).resize();`

I'm all new to this so I really don't know how to make it work. I've written

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>

in the index.html file as well. I also tried installing:

npm install --save-dev @types/node

but i get the message:

angular-quickstart@1.0.0 C:\GitHub\scrum_project_fronted
+-- UNMET PEER DEPENDENCY @angular/common@2.4.3
+-- UNMET PEER DEPENDENCY @angular/compiler@2.4.3
+-- UNMET PEER DEPENDENCY @angular/core@2.4.3
+-- UNMET PEER DEPENDENCY @angular/forms@2.4.3
`-- @types/node@6.0.61

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ng2-table@1.3.2 requires a peer of @angular/common@~2.0.0 but none was installed.
npm WARN ng2-table@1.3.2 requires a peer of @angular/compiler@~2.0.0 but none was installed.
npm WARN ng2-table@1.3.2 requires a peer of @angular/core@~2.0.0 but none was installed.
npm WARN ng2-table@1.3.2 requires a peer of @angular/forms@~2.0.0 but none was installed.

package.json:

{
    "name": "angular-quickstart",
    "version": "1.0.0",
    "description": "QuickStart package.json from the documentation, supplemented with testing support",
    "scripts": {
        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
        "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
        "lint": "tslint ./app/**/*.ts -t verbose",
        "lite": "lite-server",
        "pree2e": "webdriver-manager update",
        "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
        "test-once": "tsc && karma start karma.conf.js --single-run",
        "tsc": "tsc",
        "tsc:w": "tsc -w"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "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",
        "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.18",
        "@types/jquery": "^2.0.39",
        "angular-in-memory-web-api": "~0.2.4",
        "core-js": "^2.4.1",
        "ng2-table": "^1.3.2",
        "rxjs": "5.0.1",
        "systemjs": "0.19.40",
        "zone.js": "^0.7.4"
    },
    "devDependencies": {
        "@types/jasmine": "^2.5.36",
        "@types/jquery": "^2.0.39",
        "@types/node": "^6.0.61",
        "canonical-path": "0.0.2",
        "concurrently": "^3.1.0",
        "http-server": "^0.9.0",
        "jasmine-core": "~2.4.1",
        "karma": "^1.3.0",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-jasmine": "^1.0.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "lite-server": "^2.2.2",
        "lodash": "^4.16.4",
        "protractor": "~4.0.14",
        "rimraf": "^2.5.4",
        "tslint": "^3.15.1",
        "typescript": "~2.0.10"
    },
    "repository": {}
}

You have missing some dependencies, please paste content of `package.json` file to the question. — Kacper Polak, Jan 25 '17 at 10:36
Possible duplicate of [How to use jQuery with Angular2?](http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2) — Karbos 538, Jan 25 '17 at 10:51
There is no error in your npm message. I think your are on the wrong way to use JQuery with Angular 2. This topic is quite good : http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2 — Karbos 538, Jan 25 '17 at 10:52

score 0 · Accepted Answer · answered Jan 25 '17 at 11:19

0

Lets go over the checklist

Have you added jquery ("jquery": "^3.1.1") to package.json?
Have you added var $ = require("jquery"); to the top of your .ts file?
Have you added the jquery script to your .html file like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

If all of the above has been done you should have no problem using jQuery in your typescript file. Hope this helps!

answered Jan 25 '17 at 11:19

OArnarsson

801
1
9
25

Hi thanks for the reply. I've done all of the above now but i still get errors in my jQuery on -> var $table = $('table.users'); – trymrt Jan 25 '17 at 11:30
Okay, thats strange.. could you please post the error message? Maybe its something we can work with. – OArnarsson Jan 26 '17 at 09:10

Using jQuery in TypeScript (in an angular 2 project)

1 Answers1