ERROR ReferenceError: $ is not defined at angular datatables

Question

I'm trying to add Paging and sorting to my table but I got this error , howerver I follow all the steps which listed here http://l-lin.github.io/angular-datatables/#/getting-started.

I already check the previous problem but I did't work with me

I install all its dependencies

Here's the code of the component :-

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductService } from '../../service/product-service.service';
import { Subscription, Subject } from 'rxjs';



@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit, OnDestroy {
  

  products: any[];
  filteredProducts: any[];
  subscribtion: Subscription;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  constructor(private productService: ProductService) {
    this.subscribtion = productService.getAll().
    // We take a copy of Products and Assigned to filteredProducts
    subscribe(
      products => {
      this.filteredProducts = this.products = products;
      this.dtTrigger.next();
      }
      );
  }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };

  }
  filter(queryStr: string) {
    // console.log(this.filteredProducts);
    if (queryStr) {
      this.filteredProducts = this.products.
      filter(p => p.payload.val().title.toLowerCase().includes(queryStr.toLowerCase()));
    } else {
      this.filteredProducts = this.products;
    }
  }

  ngOnDestroy(): void {
    // to UnSubscribe
    this.subscribtion.unsubscribe();
  }

}

Here's the code of the the HTML :-
I follow also all the steps here

<p>
    <a routerLink="/admin/products/new" class="btn btn-primary">New Product</a>
</p>

<p>
   <input type="text"
    #query
    (keyup)="filter(query.value)"
   placeholder="Search ..." class="form-control">
</p>
<table 
datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger" class="table" >
    <thead class="thead-dark">
      <tr>
        <th scope="col">Title</th>
        <th scope="col">Price</th>
        <th scope="col">Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of filteredProducts">
       
        <td>{{ product.payload.val().title }}</td>
        <td>{{ product.payload.val().price }}</td>
        <td>
            <a [routerLink]="['/admin/products/', product.key]">Edit</a>
        </td>
      </tr>
    </tbody>
  </table>

If you're not already loading jQuery, you might ask yourself if DataTables is the right move. There are other options that don't require another library. — isherwood, Oct 25 '18 at 20:12
**I already added this scripts in angular.json** "styles": [ "node_modules/datatables.net-dt/css/jquery.dataTables.css" ], "scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/datatables.net/js/jquery.dataTables.js" ], — user1618811, Oct 26 '18 at 19:11
In polyfill.ts add `import * as jQuery from 'jquery'; window['$'] = jQuery;` — Gireesh Kudipudi, May 05 '19 at 17:54

score 3 · Accepted Answer · answered Oct 25 '18 at 20:09

3

$ not defined mostly means you are not including JQuery.

try adding: to your program

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>

source

answered Oct 25 '18 at 20:09

Rutger Vk

190
5

I already tried this but not work – user1618811 Oct 26 '18 at 19:10
It worked Now , But Why It works when I added it in the Index.html and not work in angular.json – user1618811 Oct 27 '18 at 08:31
In angular you use JQuery, without defining JQuery before doing something in angular it will not work, cause its not defined. – Rutger Vk Oct 27 '18 at 09:33
This doesn't work. Try these steps- 1. npm install jquery @types/jquery --save 2. go to angular.json in the project, add 'node_modules/jquery/dist/jquery.min.js' in the scripts: [ ]. 3. Reload project. – Utkarsh Mankad Mar 29 '19 at 06:40

ERROR ReferenceError: $ is not defined at angular datatables

1 Answers1