Angular Data Tables throwing error in Angular 6 Application

Question

I am using data tables in my Angular app. After installing data tables, I am facing the below error:

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

Can someone tell me what should I do to proceed?

Answer 1

You are using library for AngularJS. Use https://github.com/l-lin/angular-datatables/ insteed

Answer 2

To use angular-datatables, you need to have Node 10 or higher and NPM 6 or higher installed.

The demo was developpped in version 8.Y.Z and older and newer versions of Angular-CLI may need to have different configuration.

You need to install its dependencies before getting the latest release using 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

Add the dependencies in the scripts and styles attributes to 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"
            ],
            ...
}

Import the DataTablesModule at the appropriate level of your app.

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 {}

If you encounter the following error:

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

Please update your tsconfig.json and add the following blocks:

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