如何修复错误：模块“DashboardModule”导入的意外值“DataTableModule”。请添加@NgModule 注释答案

【问题标题】：How to fix Error: Unexpected value 'DataTableModule' imported by the module 'DashboardModule'. Please add a @NgModule annotation如何修复错误：模块“DashboardModule”导入的意外值“DataTableModule”。请添加@NgModule 注释
【发布时间】：2019-09-28 06:24:00
【问题描述】：

我将 Angular 4 项目转换为 Angular 7。ng serve 命令有效，但在登录应用程序后，它在控制台中出现错误 "Unexpected value 'DataTableModule' 由模块 'DashboadModule' 导入。请添加 @NgModule注释。” 应用程序在 Angular 4 版本中运行良好。我已经在 Imports 数组定义中有 DatatableModule，那么出现错误的原因是什么。

如果我构建 --prod.它给出了以下错误-

“DataTableModule”模板编译期间出现错误 'NgModule' 中的装饰器不支持函数调用 'NgModule' 在 @angular\core\core.ts(194,50) 处调用函数。

这里 DashboardModule 是自定义模块，DataTableModule 是导入到 Dashboard.module.ts 中的 NPM 模块。以下是定义-

1) dashboard.module.ts

import { NgModule } from '@angular/core';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { SharedModule } from './../shared/shared.module';
import { DataTableModule } from 'angular-4-data-table-bootstrap-4';
import { CommonModule } from '@angular/common';  
import { DashboardService } from './../shared/_services/dashboard.service';

@NgModule({
  imports: [
    SharedModule,CommonModule,DataTableModule,
    DashboardRoutingModule

  ],
  declarations: [
    DashboardComponent
  ],
  providers:[DashboardService]
})
export class DashboardModule { }

2) package.json 依赖项

我用于数据表的版本是 - "angular-4-data-table-bootstrap-4": "^0.2.0",

"dependencies": {
    "@agm/core": "^1.0.0-beta.1",
    "@angular/animations": "^7.2.14",
    "@angular/common": "^7.2.14",
    "@angular/compiler": "^7.2.14",
    "@angular/core": "^7.2.14",
    "@angular/forms": "^7.2.14",
    "@angular/http": "^7.2.14",
    "@angular/platform-browser": "^7.2.14",
    "@angular/platform-browser-dynamic": "^7.2.14",
    "@angular/router": "^7.2.14",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "angular-2-dropdown-multiselect": "^1.9.0",
    "angular-4-data-table-bootstrap-4": "^0.2.0",
    "angular2-multiselect-dropdown": "^2.10.2",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.0",
    "file-saver": "^1.3.3",
    "geolib": "^2.0.24",
    "intl": "^1.2.5",
    "moment": "^2.22.1",
    "mydatepicker": "^2.6.3",
    "ng-pick-datetime": "^5.0.0-beta.10",
    "ng2-filter-pipe": "^0.1.10",
    "ngx-chips": "^1.6.5",
    "ngx-inactivity": "^1.0.1",
    "ngx-loading": "^1.0.8",
    "ngx-order-pipe": "^1.1.0",
    "ngx-pagination": "^3.0.1",
    "rxjs": "^6.5.1",
    "rxjs-compat": "^6.5.1",
    "web-animations-js": "^2.3.1",
    "xlsx": "^0.14.3",
    "xlsx-style": "^0.8.13",
    "zone.js": "^0.9.1"
  }

3) dashboard.component.ts

我从 DataTableModule 导入了以下定义

import { DataTable, DataTableResource, DataTableTranslations, DataTablePagination } from 'angular-4-data-table-bootstrap-4';

我还在 NPM 存储库中验证了它的最新版本 - https://www.npmjs.com/package/angular-4-data-table-bootstrap-4 它是最新的，并且自过去 2 年以来，根本没有最新版本。我担心 Angular 7 关于模块声明或定义是否有任何重大变化？如果是，那些是什么？以及如何着手解决上述问题？

【问题讨论】：

它无法与 Angular7 一起使用，请检查 stackBlitz 或使用 angular 4 的 localy
只需注释掉这个模块，然后显示它是否有效，如果有效，那么你需要删除这个模块并安装一个我在这里找到的新模块npmjs.com/package/@ismatjon/angular-data-table。您拥有的模块仅适用于 Angular 4，它不适用于版本 7。如果可行，请告诉我。我将添加为答案。或者这里是另一个。 npmjs.com/package/angular7-data-table

标签： angular angular7 ng-modules

【解决方案1】：

我认为这会奏效。

在 app.module.ts 中：

只需替换：

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

与

import { DataTableModule } from 'angular-4-data-table/src/index';

【讨论】：

【解决方案2】：

在 Angular 11 中，使用 angular5-data-table，同时在 polyfills.ts 文件的末尾附加以下内容

declare module "@angular/core" {
    interface ModuleWithProviders<T = any> {
        ngModule: Type<T>;
        providers?: Provider[];
    }
}

【讨论】：