【发布时间】：2021-02-17 08:48:04
【问题描述】：
我是角度和数据表的新手。我正在关注有关创建 Angular DataTable 的文档，但在呈现页面时看到此错误，并且没有填充，只是一个纯表。
core.js:6142 ERROR ReferenceError: $ is not defined
at angular-datatables.directive.js:72
at ZoneDelegate.invokeTask (zone-evergreen.js:402)
at Object.onInvokeTask (core.js:28500)
at ZoneDelegate.invokeTask (zone-evergreen.js:401)
at Zone.runTask (zone-evergreen.js:174)
at invokeTask (zone-evergreen.js:483)
at ZoneTask.invoke (zone-evergreen.js:472)
at timer (zone-evergreen.js:2538)
我相信我无法配置 dtOptions，因为它找不到 jquery。我使用ng add angular-datatables 安装数据表。
这是我的 angular.json 文件。
"projects": {
"library1": {
"projectType": "library",
"root": "projects/library1",
"sourceRoot": "projects/library1/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"tsConfig": "projects/library1/tsconfig.lib.json",
"project": "projects/library1/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/library1/tsconfig.lib.prod.json"
}
}
}
},
"library2": {
"projectType": "library",
"root": "projects/library2",
"sourceRoot": "projects/library2/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"tsConfig": "projects/library2/tsconfig.lib.json",
"project": "projects/library2/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/library2/tsconfig.lib.prod.json"
}
}
}
},
"main": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../static/dist",
"index": "",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]
}
...
},
}
}
},
我有两个库将使用这个 datatables 指令。我现在正在尝试将数据表添加到 library1。这是我配置模块的方式。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
...
import {HttpClientModule, HttpClient} from "@angular/common/http";
import { DataTablesModule } from "angular-datatables";
@NgModule({
declarations: [DataFindComponent, DataCreateComponent, DataUpdateComponent],
imports: [
DataTablesModule,
DataRoutingModule,
CommonModule,
HttpClientModule
],
providers: [HttpClient]
})
export class DataModule { }
这是我的数据查找组件
import { Component, OnDestroy, OnInit } from '@angular/core';
import { DataService } from "../../util";
import { Data } from "../data";
import { DataService } from "../data.service";
import { Subject } from "rxjs";
@Component({
selector: 'app-data-find',
templateUrl: './data-find.component.html',
styleUrls: ['./data-find.component.scss']
})
export class DataFindComponent implements OnDestroy, OnInit {
dtOptions: DataTables.Settings = {};
pageName: string;
messages: any[];
datas: Data[];
dtTrigger: Subject<any> = new Subject<any>();
constructor(private data: DataService,
private dataService: DataService) {
}
ngOnInit(): void {
this.pageName = this.data.appData[DataService.PAGE_NAME];
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
serverSide: true,
processing: true,
searching: false,
}
this.dataService.query({}).subscribe(data => {
this.datas= data;
this.dtTrigger.next();
}, error => console.log(error));
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}
这是我的html
<table class="table table-sm row-border hover" datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger">
<thead>
<th>ID</th>
<th>name</th>
<th>surname</th>
</thead>
<tbody>
<tr *ngFor="let data of datas">
<td>{{ data.id }}</td>
<td>{{ data.name}}</td>
<td>{{ data.surname}}</td>
</tr>
</tbody>
</table>
这是我的 package.json 文件
{
"name": "main",
"version": "0.1.0-SNAPSHOT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --deploy-url /static/dist/",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"peerDependencies": {
"library1": "0.1.0-SNAPSHOT",
"library2": "0.1.0-SNAPSHOT"
},
"dependencies": {
"@angular/animations": "~11.1.2",
"@angular/common": "~11.1.2",
"@angular/compiler": "~11.1.2",
"@angular/core": "~11.1.2",
"@angular/forms": "~11.1.2",
"@angular/localize": "~11.1.2",
"@angular/platform-browser": "~11.1.2",
"@angular/platform-browser-dynamic": "~11.1.2",
"@angular/router": "~11.1.2",
"@ng-bootstrap/ng-bootstrap": "^9.0.2",
"angular-datatables": "^11.1.1",
"bootstrap": "^4.5.0",
"datatables.net": "^1.10.20",
"datatables.net-dt": "^1.10.20",
"jquery": "^3.4.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1101.4",
"@angular/cli": "~11.1.4",
"@angular/compiler-cli": "~11.1.2",
"@types/datatables.net": "^1.10.18",
"@types/jasmine": "~3.6.0",
"@types/jquery": "^3.3.33",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ng-packagr": "^11.0.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.1.2"
}
}
我不知道为什么它找不到 jquery，任何人都可以看到这个问题？
【问题讨论】：
-
你可以通过 cntrl+c 和 ng serve 重启你的 Angular 应用吗？
-
angular.json 文件在那里，我不使用 ng serve 来启动应用程序。 Angular 在 spring 模块中。
-
然后尝试终止整个 Spring 应用程序和 IDE，然后重新启动。如果这不起作用，请尝试在 index.html 文件中添加 jquery 的 cdn
-
我相信我已修复它，我丢失了 dist/scripts.js 文件，这就是它找不到它的原因。
标签： angular angular-datatables