CODEWITHSUNDEEP
angularangular-cli
Rupesh Bharuka
Rupesh Bharuka

Reputation: 117

angular-4-data-table package's import statement throwing an error

I've installed angular-4-data-table package and imported DataTableModule in app.module.ts imports section.

Import Statement: import {DataTableModule} from 'angular-4-data-table';

When I run ng serve command I get the below error,

Error: {project_path}\node_modules@angular\compiler-cli\ngcc\src\rendering\utils.js:23 return new imports_1.R3SymbolsImportRewriter(r3SymbolsFile.fileName);

TypeError: Cannot read property 'fileName' of null

If, I remove import statement of DataTableModule then project builds successfully..!!

Any fix please..??

package.json looks as below,

{
  "name": "sample_project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/localize": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "angular-4-data-table": "^0.4.6",
    "angular-datatables": "^13.0.1",
    "bootstrap": "^5.1.3",
    "firebase": "^9.6.1",
    "ng2-validation": "^4.2.0",
    "rxfire": "^6.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.9",
    "@angular/cli": "~12.2.9",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }
}

Upvotes: 0

Views: 256

Answers (1)

Abdullah Ahsan
Abdullah Ahsan

Reputation: 107

Have you import the data table module in app.module.ts file? import { DataTableModule } from 'angular-4-data-table';

The app.module.ts could look like below:

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

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

import { DataTableModule } from 'angular-4-data-table'; // notice this

@NgModule({
  declarations: [
    AppComponent,
    TableComponent
  ],
  imports: [
    BrowserModule,
    DataTableModule // notice this one
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 1

Related Questions