2

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?

1

2 Answers 2

2

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

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

Comments

-1

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/*"
      ]
    }
  }
}

Comments

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.