$ is not defined using JQuery in Angular 2

Question

all I'm making a small web app using Angular 2 and i want to use JQuery in it. I'm getting a error in chrome I don't know why Here is the error:

   core.umd.js:3004 EXCEPTION: Uncaught (in promise): Error: Error in `enter code here`http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: $ is not defined
ReferenceError: $ is not defined
    at DashboardComponent.ngOnInit (http://localhost:3000/app/dashboard.component.js:22:9)
    at Wrapper_DashboardComponent.detectChangesInInputProps (/AppModule/DashboardComponent/wrapper.ngfactory.js:18:53)
    at _View_DashboardComponent_Host0.detectChangesInternal (/AppModule/DashboardComponent/host.ngfactory.js:30:32)
    at _View_DashboardComponent_Host0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18)
    at _View_DashboardComponent_Host0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48)
    at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7398:24)
    at RouterOutlet.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:3458:46)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2955:20)
    at ActivateRoutes.activateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2933:26)
    at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2902:23)

And here is my code:

import { Component, ElementRef, OnInit } from '@angular/core';
declare var $:JQueryStatic;
@Component({
    moduleId: module.id,
    selector: 'my-dashboard',
    templateUrl: 'dashboard.component.html',
    styleUrls: ['dashboard.component.css'],
})
export class DashboardComponent implements OnInit{

    constructor(private elRef: ElementRef){}

    ngOnInit():any{
        $(this.elRef.nativeElement).find('button').on('click', function() {
           alert('It works!');
        });
    }
}

I used this answer to install jquery and did everything as explained but does not work. link Any ideas why? Thanks

FIX I fixed it by changing declare var $:JQueryStatic; to declare var $:any; and included <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> into index.html

@DanielD I did just now, it says that `Module "jquery" has no default export.` — Jakub Badacz, Nov 09 '16 at 22:21
Check out this post: http://stackoverflow.com/questions/35223977/jspm-jquery-typescript-module-jquery-has-no-default-export — justDan, Nov 09 '16 at 22:24
This depends on what version of typescript you are using. I think they've moved away from requiring typings. Your issue may be similar to the other question you linked to, but the answer depends on your versions of technologies. — ps2goat, Nov 09 '16 at 23:31

score 1 · Answer 1 · answered Apr 14 '17 at 11:11

1

use the cdn on layout.cshtml

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>

answered Apr 14 '17 at 11:11

pushp

2,134
4
18
31

score -1 · Answer 2 · answered Nov 09 '16 at 22:23

-1

Please check if jquery.jsis actually loaded using the chrome developer tools for example. If it does not, then you are missing a dependency in your module loader configuration.

You have to make sure the jquery.js dependency is known to the module loader of choice.

answered Nov 09 '16 at 22:23

wzr1337

3,609
5
30
53

Okay, I have it in `package.jason` declared as `"jquery": "^3.1.1"` should I install it in some way? – Jakub Badacz Nov 09 '16 at 22:30
@JakubBadacz where did you start from? can you share your code? it is hard to guess your actual setup ;) – wzr1337 Nov 10 '16 at 07:16
it's okay, i figured it out :) – Jakub Badacz Nov 12 '16 at 00:10
You basically did manually what I wanted you to do via the module loader of choice :) glad it works for you know, but I strongly recommend also searching for the module loader solution. It will help you once you add more dependencies and end up in a more complex sec scenario – wzr1337 Nov 13 '16 at 19:32

$ is not defined using JQuery in Angular 2

2 Answers2