앵귤러 머티리얼 구성 요소를 설치 한 후 erro 모듈의 메타 데이터 버전이 일치하지 않습니다.

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

업데이트를 도와주세요 최신 각도 및 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