Неожиданное значение «undefined», импортированное модулем «AppModule» в syntaxError

Question

Я начинающий и следующие уроки, в которых я работаю в угловых с Firebase.Я использую таблицу HTML, которая работала нормально, но после использования angular-4-data-table я получил следующую ошибку Неожиданное значение «undefined», импортированное модулем «AppModule» в консоли и с этой ошибкой

Это мой 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 { }

, а это Импорт в компонент

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';

Я также смотрел ранее заданные вопросы на этом форуме, но у меня не получилось.

Answer 1

Я столкнулся с той же проблемой с Angular-4-Data-table

На самом деле я использовал более высокую версию angular, которая не работала с angular-4-data-table, поэтому я пробую это и обновляю

npm install angular5-data-table --save

В модуле приложения я использую

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

И то же самое в компоненте

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

это сработало для меня, надеюсьэто будет работать для вас.

Answer 2

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

проблема в последней запятой удалить запятую после NgbModule.forRoot ()

Answer 3

Ваше приложение, модуль декоратора NgModule. Типичный ngModule выглядит так:

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

Обратите внимание, что импорт выглядит import { BrowserModule } from '@angular/platform-browser'; предназначены для "включения" модулей из разных файлов, но без объявления, подобного приведенному выше, вы не можете использовать их в текущем NgModule.

В конце ваш AppModule должен выглядеть так:

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