我是初学者和后续教程,在这些教程中,我与firebase进行了一些合作。我使用的HTML表工作正常,但是在使用angular-4-data-table之后,出现以下错误 由控制台中的模块'AppModule'导入的意外值'undefined'并出现此错误
这是我的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';
我还在此论坛上观看了以前问过的问题,但对我不起作用。
答案 0 :(得分: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';
它希望对我有用。
答案 1 :(得分:0)
您的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{}
答案 2 :(得分:0)
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot(),
]
问题在最后一个逗号中,在NgbModule.forRoot()之后删除逗号