Angular 6 应用程序中的 Angular 数据表抛出错误答案

【问题标题】：Angular Data Tables throwing error in Angular 6 ApplicationAngular 6 应用程序中的 Angular 数据表抛出错误
【发布时间】：2018-09-06 04:40:34
【问题描述】：

我在我的 Angular 应用程序中使用数据表。安装数据表后，我面临以下错误：

ReferenceError: angular is not defined
    at Object../node_modules/angular-datatables/dist/angular-datatables.js

谁能告诉我该怎么做才能继续？

【问题讨论】：

AngularJs ReferenceError: angular is not defined的可能重复

标签： angular datatables angular6

【解决方案1】：

您正在使用AngularJS 的库。使用https://github.com/l-lin/angular-datatables/ insteed

【讨论】：

【解决方案2】：

要使用角度数据表，您需要安装 Node 10 或更高版本以及 NPM 6 或更高版本。

该演示是在 8.Y.Z 版本中开发的，新旧版本的 Angular-CLI 可能需要有不同的配置。

您需要在使用 NPM 获取最新版本之前安装其依赖项：

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

将scripts和styles属性中的依赖添加到angular.json中：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "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"
            ],
            ...
}

在应用的适当级别导入 DataTablesModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DataTablesModule } from 'angular-datatables';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    DataTablesModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

如果遇到以下错误：

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in /home/l-lin/projects/angular-datatables/demo/node_modules/angular-datatables/node_modules/@angular/core/core.d.ts, resolving symbol DataTablesModule in /home/l-lin/projects/angular-datatables/demo/node_modules/angular-datatables/src/angular-datatables.module.ts, resolving symbol DataTablesModule in /home/l-lin/projects/angular-datatables/demo/node_modules/angular-datatables/src/angular-datatables.module.ts

请更新您的 tsconfig.json 并添加以下块：

{
  "compilerOptions": {
    ...
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  }
}

【讨论】：