[英]How to fix Error: Unexpected value 'DataTableModule' imported by the module 'DashboardModule'. Please add a @NgModule annotation
I converted Angular 4 project to Angular 7. ng serve commands works but after login in an application, it gives error in console "Unexpected value 'DataTableModule' imported by the module 'DashboadModule' . Please add a @NgModule annotation."我将 Angular 4 项目转换为 Angular 7。ng serve 命令有效,但在登录应用程序后,它在控制台中出现错误“Unexpected value 'DataTableModule' 由模块 'DashboadModule' 导入。请添加 @NgModule 注释。” Application works fine in Angular 4 version.
应用程序在 Angular 4 版本中运行良好。 I already have DatatableModule in Imports array definition then what is reason of error coming.
我已经在 Imports 数组定义中有 DatatableModule 那么出现错误的原因是什么。
If I ng build --prod.如果我 ng build --prod. it gives below error -
它给出了以下错误 -
ERROR in Error during template compile of 'DataTableModule' Function calls are not supported in decorators in 'NgModule' 'NgModule' calls a function at @angular\\core\\core.ts(194,50). “NgModule”中的装饰器不支持“DataTableModule”模板编译过程中出现错误“NgModule”调用@angular\\core\\core.ts(194,50) 中的函数。
Here DashboardModule is custom module and DataTableModule is NPM module imported in Dashboard.module.ts.这里 DashboardModule 是自定义模块,DataTableModule 是 Dashboard.module.ts 中导入的 NPM 模块。 Below is definition -
下面是定义——
1) dashboard.module.ts 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 dependencies 2) package.json 依赖
Here version I am using for datatable is - "angular-4-data-table-bootstrap-4": "^0.2.0",我用于数据表的版本是-“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 3)dashboard.component.ts
I imported below definition from DataTableModule我从 DataTableModule 导入了以下定义
import { DataTable, DataTableResource, DataTableTranslations, DataTablePagination } from 'angular-4-data-table-bootstrap-4';
I also verfied its latest version in NPM repository - https://www.npmjs.com/package/angular-4-data-table-bootstrap-4 it is latest and since last 2 years, no latest release at all.我还在 NPM 存储库中验证了它的最新版本 - https://www.npmjs.com/package/angular-4-data-table-bootstrap-4它是最新的,自过去 2 年以来,根本没有最新版本。 I am worried is there any major changes in Angular 7 about module declaration or definition?
我担心 Angular 7 是否有关于模块声明或定义的重大变化? If yes, what are those?
如果有,那些是什么? and how to proceed to fix above issue?
以及如何解决上述问题?
I think this would work.我认为这会奏效。
In app.module.ts:在 app.module.ts 中:
Just replace:只需更换:
import { DataTableModule } from 'angular-4-data-table';
with和
import { DataTableModule } from 'angular-4-data-table/src/index';
In angular 11, use angular5-data-table , also append the following at the end of your polyfills.ts
file在角11,使用angular5数据表,还附加在你的结尾以下
polyfills.ts
文件
declare module "@angular/core" {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.