导入的@ngModule中的模块未被拾取

时间:2017-11-23 08:00:55

标签: angular

我有一个主要的@ngModule,看起来像这样:

import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from "@angular/forms";
import {BrowserModule} from '@angular/platform-browser';
import {AccountCreateComponent} from './account/create/account-create.component';
import {AccountListComponent} from './account/list/account-list.component';
import {AccountUpdateComponent} from './account/update/account-update.component';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {LeaveCreateComponent} from './leave/create/leave-create.component';
import {LeaveListComponent} from './leave/list/leave-list.component';

import {LoginComponent} from './login/login.component';
import {RestApiService} from "./rest-api.service";
import {HttpModule} from "@angular/http";
import {LeavePendingListComponent} from './leave/pending-list/leave-pending-list.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {MatPaginator, MatTableDataSource} from "@angular/material";
import {MaterialModule} from "./MaterialModule";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    AccountCreateComponent,
    AccountUpdateComponent,
    AccountListComponent,
    LeaveCreateComponent,
    LeaveListComponent,
    LeavePendingListComponent,
    MaterialModule,
      MatTableDataSource
  ],
  imports: [
      BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    MaterialModule,
      MatTableDataSource,
    HttpModule
  ],
  providers: [RestApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我有一个单独的ngModule(称为MaterialModule),如下所示:

import {
    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule,
    MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule,
    MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule,
    MatSnackBarModule, MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule,
    MatTooltipModule
} from "@angular/material";
import {A11yModule} from "@angular/cdk/a11y";
import {BidiModule} from "@angular/cdk/bidi";
import {ObserversModule} from "@angular/cdk/observers";
import {OverlayModule} from "@angular/cdk/overlay";
import {PlatformModule} from "@angular/cdk/platform";
import {PortalModule} from "@angular/cdk/portal";
import {ScrollDispatchModule} from "@angular/cdk/scrolling";
import {CdkStepperModule} from "@angular/cdk/stepper";
import {CdkTableModule} from "@angular/cdk/table";
import {NgModule} from "@angular/core";
import {MatTableDataSource} from "@angular/material";
/**
 * Created by maurice on 22-11-2017.
 */
@NgModule({
    exports: [
        // CDK
        // A11yModule,
        // BidiModule,
        // ObserversModule,
        // OverlayModule,
        // PlatformModule,
        // PortalModule,
        // ScrollDispatchModule,
        // CdkStepperModule,
        CdkTableModule,

        // Material
        MatPaginatorModule,
        // MatAutocompleteModule,
        // MatButtonModule,
        // MatButtonToggleModule,
        // MatCardModule,
        // MatCheckboxModule,
        // MatChipsModule,
        // MatDatepickerModule,
        // MatDialogModule,
        // MatExpansionModule,
        // MatGridListModule,
        // MatIconModule,
        // MatInputModule,
        // MatListModule,
        // MatMenuModule,
        // MatProgressBarModule,
        // MatProgressSpinnerModule,
        // MatRadioModule,
        // MatRippleModule,
        // MatSelectModule,
        // MatSidenavModule,
        // MatSlideToggleModule,
        // MatSliderModule,
        // MatSnackBarModule,
        // MatStepperModule,
        MatTableModule,
        MatTableDataSource,
        // MatTabsModule,
        // MatToolbarModule,
        // MatTooltipModule,
        // MatNativeDateModule,
    ]
})
export class MaterialModule {}

您可以清楚地看到MaterialModule正在导入MatTableDataSource。然而,当我运行应用程序时,我收到以下错误:

Can't export value MatTableDataSource from MaterialModule as it was neither declared nor imported!

由于MatTableDataSource由MaterialModule导出并由appModule导入,因此非常混乱。我还将MatTableDataSource直接添加到appModule的导入中,但这也没有解决任何问题。谁能看到我做错了什么?这应该有用..

1 个答案:

答案 0 :(得分:0)

模块必须位于imports,而不是exports

imports: [
   CdkTableModule,
   MatPaginatorModule,
   MatTableModule,
   MatTableDataSource
] 

然后删除node_modules,然后点击npm install