title: How to fix Error: Unexpected value 'DataTableModule' imported by the module 'DashboardModule'. Please add a @NgModule annotation
body: <p>I converted Angular 4 project to Angular 7. ng serve commands works but after login in an application, it gives error in console <strong>"Unexpected value 'DataTableModule' imported by the module 'DashboadModule' . Please add a @NgModule annotation."</strong> Application works fine in Angular 4 version. I already have DatatableModule in Imports array definition then what is reason of error coming.</p>
  
  <p>If I ng build --prod. it gives below error -</p>
  
  <p><strong>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).</strong></p>
  
  <p>Here DashboardModule is custom module and DataTableModule is NPM module imported in Dashboard.module.ts. Below is definition -</p>
  
  <p><strong>1) dashboard.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>2) package.json dependencies</strong></p>
  
  <p>Here version I am using for datatable is - "angular-4-data-table-bootstrap-4": "^0.2.0",</p>
  
  <pre><code>"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"
    }
  </code></pre>
  
  <p><strong>3) dashboard.component.ts</strong></p>
  
  <p>I imported below definition from DataTableModule</p>
  
  <pre><code>import { DataTable, DataTableResource, DataTableTranslations, DataTablePagination } from 'angular-4-data-table-bootstrap-4';
  </code></pre>
  
  <p>I also verfied its latest version in NPM repository - <a href="https://www.npmjs.com/package/angular-4-data-table-bootstrap-4" rel="nofollow noreferrer">https://www.npmjs.com/package/angular-4-data-table-bootstrap-4</a> it is latest and since last 2 years, no latest release at all.  I am worried is there any major changes in Angular 7 about module declaration or definition? If yes, what are those? and how to proceed to fix above issue?</p>