模块“AppModule”在 syntaxError 处导入的意外值“未定义”答案

【问题标题】：Unexpected value 'undefined' imported by the module 'AppModule' at syntaxError模块“AppModule”在 syntaxError 处导入的意外值“未定义”
【发布时间】：2019-09-12 21:07:28
【问题描述】：

我是初学者，正在学习教程，我正在使用 firebase 进行 Angular 工作。我使用工作正常的 HTML 表，但在使用 angular-4-data-table 后出现以下错误 模块“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

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

我也看过之前在这个论坛上提出的问题，但对我没有用。

【问题讨论】：

您的app.module.ts 看起来格式不正确，imports 元素应该是@NgModule 参数的一部分。发布整个文件。
@GabrielNegut 我添加了整个文件
仔细查看错误消息后，看起来数据表库使用了 ts 文件，并且未包含在您的构建中。有关可能的解决方案，请参阅 this answer here。

标签： javascript angular datatable

【解决方案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';

它对我有用，希望它对你有用。

【讨论】：

【解决方案2】：

你的 AppModule 装饰器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{}

【讨论】：

我修改问题请查看

【解决方案3】：

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

问题在于 NgbModule.forRoot() 之后的最后一个逗号删除逗号

【讨论】：