CODEWITHSUNDEEP
angular
Muhammad Rashid
Muhammad Rashid

Reputation: 219

Jquery not loading with Angular typescript

I want to add jquery in my angular project,but it is not working. I have try multiple solution but it is not working.

Error

ERROR ReferenceError: $ is not defined
    at SignInComponent.push../src/app/users/sign-in/sign-in.component.ts.SignInComponent.ngOnInit (sign-in.component.ts:28)
    at checkAndUpdateDirectiveInline (core.js:22099)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)
    at Object.eval [as updateDirectives] (SignInComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
    at checkAndUpdateView (core.js:23307)
    at callViewAction (core.js:23548)

What i tried

- npm install jquery — save

and then

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

My Component

import { Component, OnInit,Renderer2, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';

declare var $: any;

@Component({
  selector: 'app-master',
  templateUrl: './master.component.html',
  styleUrls: ['./master.component.css']
})

export class MasterComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log('call');
    console.log($(document));
  }

Upvotes: 1

Views: 4505

Answers (2)

Masoud Bimar
Masoud Bimar

Reputation: 7801

it might be your script path in the angular.json file, change it this way(remove one dot):

"scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]

Upvotes: 0

Chunbin Li
Chunbin Li

Reputation: 2244

You can use @types/jquery

https://www.npmjs.com/package/@types/jquery

npm i @types/jquery

Upvotes: 2

Related Questions