安装Angular Material组件后，模块错误的元数据版本不匹配

Question

下面的

是我的app.module.ts文件代码。当我构建错误发生并在app.module.ts做一些更改后，代码编译并正常工作。如果我们退出构建监视并再次构建监视，则错误会再次出现。我无法在代码中找到任何错误，有人请帮助

下面的

是我的app.module.ts文件代码。当我构建错误发生并在app.module.ts做一些更改后，代码编译并正常工作。如果我们退出构建监视并再次构建监视，则错误会再次出现。我无法在代码中找到任何错误，有人请帮助

  import 'core-js/es7/reflect';
  import 'zone.js';
import 'reflect-metadata';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {UserService} from './services/user.service';
import { HttpModule } from '@angular/http';
// import { DataTablesModule } from 'angular-datatables';




import { DashboardComponent } from './dashboard/dashboard.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { FooterComponent } from './footer/footer.component';
import { SideBarComponent } from './side-bar/side-bar.component';
import { AllUsersComponent } from './all-users/all-users.component';

import { HeaderTitleComponent } from './header-title/header-title.component';
import { DisabledUsersComponent } from './disabled-users/disabled-users.component';
import { DeletedUsersComponent } from './deleted-users/deleted-users.component';



import { ProductComponent } from './product/product.component';
// import { ProductDetailComponent } from './product-detail/product-detail.component';
// import { DataTablesModule } from 'angular-datatables';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component';


import { NavigationComponent } from './navigation/navigation.component';
import { HomeComponent } from './home/home.component';
import { CardComponent } from './card/card.component';
import { FinishedauctionComponent } from './finishedauction/finishedauction.component';
import {Ng2PageScrollModule} from 'ng2-page-scroll';
import { UpcomingauctionsComponent } from './upcomingauctions/upcomingauctions.component';
// import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { FileUploader } from 'ng2-file-upload';

// import { ImageUploadModule } from "angular2-image-upload";
// import { ImageUploadModule } from "angular2-image-upload";


import { ProductService } from './services/product.service';

import {AuthGuard} from './guards/auth.guard' ;


import { EqualValidator } from './equal-validator.directive';
import { LoginComponent } from './login/login.component';
import { EmailVerificationComponent } from './email-verification/email-verification.component';
import { ClosedAuctionBackComponent } from './closed-auction-back/closed-auction-back.component';
import { UpcomingAuctionBackComponent } from './upcoming-auction-back/upcoming-auction-back.component';
import { RunningAuctionBackComponent } from './running-auction-back/running-auction-back.component';
import { SocialmediaComponent } from './socialmedia/socialmedia.component';
import { ReadMoreComponent } from './read-more/read-more.component';
import { CountDownTimerComponent } from './count-down-timer/count-down-timer.component';

import {ProductServiceService} from './services/product-service.service';
import { MyauctionsComponent } from './myauctions/myauctions.component';
import { CapitalizePipe } from './capitalize.pipe';
import { RunningauctionComponent } from './runningauction/runningauction.component';
import { CardRunningComponent } from './card-running/card-running.component';
import { WinnerconfirmComponent } from './winnerconfirm/winnerconfirm.component'

import { RegistrationComponent } from './registration/registration.component';

// import { ImageUploadModule } from "angular2-image-upload";
import { NKDatetimeModule } from 'ng2-datetime/ng2-datetime';
//  import { DataTablesModule } from 'angular-datatables';
import * as $ from 'jquery';
import { ProductListComponent } from './product-list/product-list.component';
import { FilterPipe } from './filter.pipe';
import { ManageProductComponent } from './manage-product/manage-product.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
// import { ProductDetailComponent } from './product-detail/product-detail.component';
import { ProductPipe } from './product.pipe';
//import { NgDatepickerModule } from 'ng2-datepicker';
import { NgDatepickerComponent } from './ng-datepicker/ng-datepicker.component';
import { AdminviewedComponent } from './adminviewed/adminviewed.component';
import { NgDatepickerModule } from 'ng2-datepicker';
import { UploadComponent } from './upload/upload.component';
// import { NKDatetimeModule } from 'ng2-datetime/ng2-datetime';

import { ImageUploadModule } from "angular2-image-upload";//file upload
import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';

import { CommonModule } from '@angular/common';
import { NgSlimScrollModule } from 'ngx-slimscroll';
import { DateSearchPipe } from './date-search.pipe';
import { Config } from './../../config/config';
import { MyauctiontableComponent } from './myauctiontable/myauctiontable.component';
import { SearchPipe } from './search.pipe';
import 'hammerjs';
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,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatStepperModule,
} from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialComponent } from './material/material.component';//angularmaterial

const appRoutes: Routes = [
  {path:'', redirectTo:'/login', pathMatch:'full'},
  {path:'registration', component:RegistrationComponent},
  {path:'product-detail/:id', component:ProductDetailComponent},
   {path:'product', component:ProductComponent},
  {path:'product-list', component:ProductListComponent},
  {path:'email-verification/:id', component:EmailVerificationComponent},
  {path:'login', component:LoginComponent},  
  {path:'socialmedia/:id', component:SocialmediaComponent},
  {path:'adminviewed/:id', component:AdminviewedComponent},

  {path:'dashboard', component: DashboardComponent},
  {path:'all-users', component: AllUsersComponent},
  {path:'disabled-users', component: DisabledUsersComponent},
  {path:'deleted-users', component: DeletedUsersComponent},

  {path:'upcomingauction', component: UpcomingauctionsComponent},
  {path:'finishedauction', component: FinishedauctionComponent},
  {path:'runningauction', component: RunningauctionComponent},
  {path:'home', component:HomeComponent},
  {path:'myauctions', component:MyauctionsComponent},
  {path:'email-verification/:id', component:EmailVerificationComponent},
  {path:'closed-auction', component:ClosedAuctionBackComponent},
  {path:'upcoming-auction', component:UpcomingAuctionBackComponent},
  {path:'running-auction', component:RunningAuctionBackComponent},
  {path:'winnerconfirm/:id', component:WinnerconfirmComponent},
  // { path: '**', component: LoginComponent },

  {path:'upload', component:UploadComponent},//file upload
  {path:'material', component:MaterialComponent}//file upload
]

@NgModule({
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
  ]
})
export class DemoMaterialModule {}

@NgModule({

  declarations: [
    AppComponent,
    ProductComponent,
    RegistrationComponent,
    ProductListComponent,
    FilterPipe,
    ManageProductComponent,
    ProductDetailComponent,
    LoginComponent,
    NavigationComponent,
    HomeComponent,
    CardComponent,
    FinishedauctionComponent,
    UpcomingauctionsComponent,
    MyauctionsComponent,
    EqualValidator,
    CapitalizePipe,
    DashboardComponent,
    SideBarComponent,
    TopBarComponent,
    HeaderTitleComponent,
    FooterComponent,
    AllUsersComponent,
    DisabledUsersComponent,
    DeletedUsersComponent,
    EmailVerificationComponent,
    ClosedAuctionBackComponent,
    UpcomingAuctionBackComponent,
    RunningAuctionBackComponent,
    SocialmediaComponent,
    FileSelectDirective,

    ReadMoreComponent,
    CountDownTimerComponent,
    RunningauctionComponent,
    CardRunningComponent,
    WinnerconfirmComponent,
    ProductPipe,
    AdminviewedComponent,
    UploadComponent,
    FileSelectDirective,
    NgDatepickerComponent,
    DateSearchPipe,
    MyauctiontableComponent,
    SearchPipe,
    MaterialComponent
  ],
  imports: [
    BrowserModule,
    // DataTablesModule,
    FormsModule,
    ReactiveFormsModule,
    Ng2PageScrollModule,
    HttpModule,
    // ImageUploadModule,
    // DataTablesModule,
    // NKDatetimeModule,
    NKDatetimeModule,
    //  DataTablesModule
    // Ng2DatetimePickerModule
    //BrowserModule,
    // DataTablesModule,
    FormsModule,
    ReactiveFormsModule,
    Ng2PageScrollModule,
    HttpModule,
    // ImageUploadModule,
    RouterModule.forRoot(appRoutes),
    NgSlimScrollModule,
  //  NgDatepickerModule
    // DataTablesModule,
    ImageUploadModule,
    // NKDatetimeModule,
    // NKDatetimeModule,
    //  DataTablesModule
    // Ng2DatetimePickerModule
    //ImageUploadModule.forRoot(), //file upload
    BrowserAnimationsModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
     //angular material
  ],

  providers: [ProductServiceService,
    UserService,
    AuthGuard,
    ProductService,
    Config
  ],

  bootstrap: [AppComponent],
  //exports: [ NgDatepickerComponent, CommonModule, FormsModule, NgSlimScrollModule ]

})
export class AppModule { }

我的package.json

{



 "name": "angular",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/cdk": "^5.0.1",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^5.0.1",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ngui/datetime-picker": "^0.16.2",
    "angular-datatables": "^5.0.0",
    "angular-material-source": "github:angular/material",
    "angular2-datetimepicker": "^1.0.1",
    "angular2-fontawesome": "^0.9.3",
    "angular2-image-upload": "^1.0.0-rc.0",
    "angular2-jwt": "^0.2.3",
    "angular2-text-equality-validator": "^2.0.0",
    "bcrypt-nodejs": "0.0.3",
    "bootstrap": "^3.3.7",
    "bootstrap-datepicker": "^1.7.1",
    "bootstrap-timepicker": "^0.5.2",
    "core-js": "^2.4.1",
    "datatables.net": "^1.10.16",
    "datatables.net-dt": "^1.10.16",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "jsonwebtoken": "^8.1.0",
    "md-data-table": "^2.2.0",
    "ng2-datepicker": "^2.1.6",
    "ng2-datepicker-bootstrap": "^1.0.0",
    "ng2-datetime": "^1.4.0",
    "ng2-datetime-picker": "^0.15.1",
    "ng2-eonasdan-datetimepicker": "0.0.8",
    "ng2-file-upload": "^1.3.0",
    "ng2-imageupload": "^1.4.2",
    "ng2-page-scroll": "^4.0.0-beta.12",
    "rxjs": "^5.4.2",
    "socket.io": "^2.0.4",
    "socket.io-client": "^2.0.4",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.0",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/datatables.net": "^1.10.7",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.16",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "gridfs-stream": "1.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "mongoose": "4.8.4",
    "multer": "1.3.0",
    "multer-gridfs-storage": "1.0.0",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }
}

Answer 1

更新到最新的Angular和正确版本的TypeScript

npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 typescript@2.4.2 rxjs@^5.5.2