angular-4-data-table 包的导入语句抛出错误

分享于2022年07月17日 angular angular-cli 问答
【问题标题】:angular-4-data-table 包的导入语句抛出错误(angular-4-data-table package's import statement throwing an error)
【发布时间】:2022-01-23 20:35:43
【问题描述】:

我已经安装了 angular-4-data-table 包并在 app.module.ts 导入部分导入了 DataTableModule 。 p>

进口声明: 从'angular-4-data-table'导入{DataTableModule};

当我运行 ng serve 命令时,出现以下错误,

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

TypeError: 无法读取属性 'fileName' of null

如果,我删除 DataTableModule 的导入语句,那么项目构建成功..!!

请问有什么解决办法吗??

package.json 如下所示,

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

  • 可以分享一下 package.json 文件吗?
  • 上面package.json的代码我已经给你了。如果您需要其他任何事情,请告诉我。
  • 我无法在 package.json 中看到包数据表,但我检查了 npm 存储库,该包是 4 年前发布的,并且没有维护。我会建议你使用 npmjs.com/package/angular-datatables/v/13.0.1 ,它也支持 angular 12
  • 我已经安装了 angular-4-data-table 但我还没有安装“angular-datatables”。我是否需要 angular-datatables 才能使用 angular-4-data-table?
  • 我建议不要使用 angular-4-data-table,因为该包没有被维护。从项目中删除它并使用我建议它们具有数据表的所有功能的 Angular DataTables。

【解决方案1】:

你有没有在 app.module.ts 文件中导入数据表模块? import { DataTableModule } from 'angular-4-data-table';

app.module.ts 可能如下所示:

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

  • 是的,我已经在 app.module.ts 中导入了 DataTableModule,我在上面消息的第一行中也提到了这一点。
  • 请注意,您还必须如何将 DataTableModule 包含到 @NgModule 的导入数组中。你有吗?
  • 是的,我以同样的方式将 DataTableModule 包含在 @NgModule 的导入数组中。