0

I am new to ionic. I am creating one simple application in ionic 3 angular 4. In this while implementing the angular datatable. I got the following error.

vendor.js:1822 ERROR ReferenceError: $ is not defined.

I don’t know what I am doing wrong. Please help me to resolve this issue.

Initially I have installed all of the following libraries using command prompt,

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

After that I have included the dependencies - scripts(jquery.dataTables.css) and styles(jquery.js,jquery.dataTables.js) attributes in the angular-cli.json. please find my complete angular-cli.json file below,

angular-cli.json:

{
“$schema”: “./node_modules/@angular/cli/lib/config/schema.json”,
“project”: {
“name”: “sample-datatables”
},
“apps”: [
{
“root”: “src”,
“outDir”: “dist”,
“assets”: [
“assets”,
“favicon.ico”
],
“index”: “index.html”,
“main”: “main.ts”,
“polyfills”: “polyfills.ts”,
“test”: “test.ts”,
“tsconfig”: “tsconfig.app.json”,
“testTsconfig”: “tsconfig.spec.json”,
“prefix”: “app”,
“styles”: [
“styles.css”,
“…/node_modules/bootstrap/dist/css/bootstrap.css”,
“…/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css”,
“…/node_modules/datatables.net-dt/css/jquery.dataTables.css”
],
“scripts”: [
“…/node_modules/jquery/dist/jquery.js”,
“…/node_modules/datatables.net/js/jquery.dataTables.js”,
“…/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js”,
“…/node_modules/popper.js/dist/umd/popper.js”,
“…/node_modules/bootstrap/dist/js/bootstrap.js”
],
“environmentSource”: “environments/environment.ts”,
“environments”: {
“dev”: “environments/environment.ts”,
“prod”: “environments/environment.prod.ts”
}
}
],
“e2e”: {
“protractor”: {
“config”: “./protractor.conf.js”
}
},
“lint”: [
{
“project”: “src/tsconfig.app.json”,
“exclude”: “/node_modules/”
},
{
“project”: “src/tsconfig.spec.json”,
“exclude”: “/node_modules/”
},
{
“project”: “e2e/tsconfig.e2e.json”,
“exclude”: “/node_modules/”
}
],
“test”: {
“karma”: {
“config”: “./karma.conf.js”
}
},
“defaults”: {
“styleExt”: “css”,
“component”: {}
}
}

todoList.html:

 <ion-header>

      <ion-navbar>
        <ion-title>To-do List</ion-title>
      </ion-navbar>

    </ion-header>


    <ion-content padding>



          <table datatable class="row-border hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>First name</th>
          <th>Last name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Foo</td>
          <td>Bar</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Someone</td>
          <td>Youknow</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Iamout</td>
          <td>Ofinspiration</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Yoda</td>
          <td>Skywalker</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Patrick</td>
          <td>Dupont</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Barack</td>
          <td>Obama</td>
        </tr>
        <tr>
          <td>7</td>
          <td>François</td>
          <td>Holland</td>
        </tr>
        <tr>
          <td>8</td>
          <td>Michel</td>
          <td>Popo</td>
        </tr>
        <tr>
          <td>9</td>
          <td>Chuck</td>
          <td>Norris</td>
        </tr>
        <tr>
          <td>10</td>
          <td>Simon</td>
          <td>Robin</td>
        </tr>
        <tr>
          <td>11</td>
          <td>Louis</td>
          <td>Lin</td>
        </tr>
        <tr>
          <td>12</td>
          <td>Zelda</td>
          <td>Link</td>
        </tr>
      </tbody>
    </table>


    </ion-content>

In app.module.ts I have imported the Datatable module as follows,

import { DataTablesModule } from ‘angular-datatables’;

@NgModule({
.
.
.
imports: [
DataTablesModule
]
})

Thanks in advance

4
  • can u show me the place you are using $ ? Commented Apr 25, 2018 at 3:55
  • I didn't use $ anywhere. Commented Apr 25, 2018 at 4:16
  • I guess the relative path is wrong, try with two dots "../" instead of ".../" Commented Apr 25, 2018 at 4:47
  • I angular-cli.json it is two dots only. Here it seems llike three dots. Commented Apr 25, 2018 at 5:16

1 Answer 1

3

It is because jquery is not included to your project.

  1. Check if the links you specified in the .angular.cli.json are correct for the scripts.

    "../node_modules/ "

  2. You can simple include the jquery with a script tag in your index html.

    <script src="jquery_cdn_link"> </script>


If the above does not solve it, feel free to comment I am here.

Sign up to request clarification or add additional context in comments.

3 Comments

OP has included jquery in angular.cli.json
Check it in your browser dev-tools if really did .
Thank you so much for your help. The issue has been resolved after adding the jquery in index.html page using script tags. you save my day thank you once again @bereket gebredingle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.