Unexpected value 'undefined' imported by the module 'AppModule' at syntaxError

Question

I am Beginner and following tutorials, in which i am working in angular with firebase. I use HTML table which was working fine but after using angular-4-data-table i got following error Unexpected value 'undefined' imported by the module 'AppModule' in console and with this error

This is my app.module

 import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AngularFireModule } from 'angularfire2';
    import { AngularFireDatabaseModule } from 'angularfire2/database';
    import { AngularFireAuthModule } from 'angularfire2/auth';
    import {RouterModule} from '@angular/router';
    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
    import { FormsModule} from '@angular/forms';
    import { CustomFormsModule } from 'ng2-validation';
    import { DataTableModule } from 'angular-4-data-table';
       @NgModule({
  declarations: [
    AppComponent,
    BsNavbarComponent,
    HomeComponent,
    ProductsComponent,
    ShoppingCartComponent,
    CheckCheckoutComponent,
    OrderSucessComponent,
    MyOrderComponent,
    AdminProductsComponent,
    AdminOrdersComponent,
    LoginComponent,
    ProductFormComponent
   ],
  imports: [
    BrowserModule,
    FormsModule,
    DataTableModule,
    CustomFormsModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    NgbModule.forRoot()
],
  providers: [
    AuthService,
    AuthGaurd,
    AdminAuthGuard,
    UserService,
    CategoryService,
    ProductsComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

and this is Import in component

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductService } from 'src/app/product.service';
import { Subscription } from 'rxjs';
import { Product } from 'src/app/models/product';
import { DataTableResource } from 'angular-4-data-table';

I also watched previously asked questions on this forum but did not work for me.

Your `app.module.ts` looks malformed, the `imports` element should be part of the argument for `@NgModule`. Post the entire file. — Gabriel Negut, Apr 23 '19 at 16:13
After a closer look at the error message, it looks like the datatable library uses a ts file and it's not included in your build. See [this answer here](https://stackoverflow.com/a/48454605/619252) for a possible solution. — Gabriel Negut, Apr 24 '19 at 08:08

score 0 · Answer 1 · answered Apr 23 '19 at 16:26

Your AppModule the decorator NgModule. A typical ngModule looks like this:

@NgModule({
  declarations: [...],
  imports: [...]
})
export class AppModule{}

Pay attention that the imports that look like import { BrowserModule } from '@angular/platform-browser'; are meant to "include" the modules from different files but without a declaration like the one above you cannot use them in the current NgModule.

In the end, your AppModule should look like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { FormsModule} from '@angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        DataTableModule,
        CustomFormsModule,
        AppRoutingModule,
        AngularFireModule.initializeApp(environment.firebase),
        AngularFireDatabaseModule,
        AngularFireAuthModule
....
], 
declarations: [....]
})
export class AppModule{}

I modify the question Please review – Ahmad Raza Apr 24 '19 at 15:22 — Ahmad Raza, Apr 24 '19 at 15:22

score 0 · Answer 2 · answered Apr 25 '19 at 08:48

I was facing same problem with Angular-4-Data-table

Actually i was using a higher version of angular which was not working with angular-4-data-table so i try this and upgrade

npm install angular5-data-table --save

In App Module i use

import {DataTableModule} from 'angular5-data-table';

And same in component

import { DataTableResource } from 'angular5-data-table';

it worked for me hopefully it will work for you.

score 0 · Answer 3 · answered Apr 25 '19 at 08:50

 imports: [
    BrowserModule,
    FormsModule,
    DataTableModule,
    CustomFormsModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    NgbModule.forRoot(),
]

problem is in last comma remove comma after NgbModule.forRoot()

Unexpected value 'undefined' imported by the module 'AppModule' at syntaxError

3 Answers3