在 ionic 3 angular 4 应用程序中实现 angular 数据表时未定义 $

Question

我是 ionic 的新手。我正在 ionic 3 angular 4 中创建一个简单的应用程序。在此同时实现 angular 数据表。我收到以下错误。

vendor.js:1822 错误 ReferenceError: $ 未定义。

我不知道我做错了什么。请帮我解决这个问题。

最初我使用命令提示符安装了以下所有库，

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

之后，我在 angular-cli.json 中包含了依赖项 - scripts(jquery.dataTables.css) 和 styles(jquery.js,jquery.dataTables.js) 属性.请在下面找到我完整的 angular-cli.json 文件，

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>

在app.module.ts中我导入了Datatable模块如下，

import { DataTablesModule } from ‘angular-datatables’;

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

提前致谢

Answer 1

这是因为 jquery 未包含在您的项目中。

检查您在 .angular.cli.json 中指定的链接对于脚本是否正确。

"../node_modules/ "
您可以在索引 html.
中简单地包含带有脚本标签的 jquery
<script src="jquery_cdn_link"> </script>

如果以上没有解决，欢迎评论我来了

在 ionic 3 angular 4 应用程序中实现 angular 数据表时未定义 $

$ is not defined while implementing angular data-tables in ionic 3 angular 4 application

angular-datatables

ionic3

angular