Angular2項組件無法正常工作

我試圖按照教程到定製對話框組件添加到我的項目，但我得到以下錯誤，當我在我的模塊中的組件添加到收藏entryComponents -Angular2項組件無法正常工作

這裏是我的組件： -

import { Component } from '@angular/core'; 

import { DialogRef, ModalComponent } from 'angular2-modal'; 
import { BSModalContext } from 'angular2-modal/plugins/bootstrap'; 

export class AdditionCalculateWindowData extends BSModalContext { 
constructor(public num1: number, public num2: number) { 
    super(); 
} 
} 

@Component({ 
selector: 'modal-content', 
styles: [` 
    .custom-modal-container { 
     padding: 15px; 
    } 

    .custom-modal-header { 
     background-color: #219161; 
     color: #fff; 
     -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75); 
     -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75); 
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75); 
     margin-top: -15px; 
     margin-bottom: 40px; 
    } 
`], 
template: ` 
    <div class="container-fluid custom-modal-container"> 
     <div class="row custom-modal-header"> 
      <div class="col-sm-12"> 
       <h1>A Custom modal design</h1> 
      </div> 
     </div> 
     <div class="row" [ngClass]="{'myclass' : shouldUseMyClass}"> 
      <div class="col-xs-12"> 
       <div class="jumbotron"> 
        <h1>Do the math to quit:</h1> 
        <p class="lead">I received an injection of the number 
<strong>{{context.num1}}</strong> and the number <strong>{{context.num2}} 
</strong></p> 
        <span>What is the sum?</span> 
        <input class="form-control" type="text" #answer 
(keyup)="onKeyUp(answer.value)" autofocus> 
       </div> 
      </div> 
     </div> 
    </div>` 
}) 
export class AdditionCalculateWindow implements 
ModalComponent<AdditionCalculateWindowData> { 
context: AdditionCalculateWindowData; 

public wrongAnswer: boolean; 

constructor(public dialog: DialogRef<AdditionCalculateWindowData>) { 
    this.context = dialog.context; 
    this.wrongAnswer = true; 
} 

onKeyUp(value) { 
    this.wrongAnswer = value != 5; 
    this.dialog.close(); 
} 


beforeDismiss(): boolean { 
    return true; 
} 

beforeClose(): boolean { 
    return this.wrongAnswer; 
} 
}

這裏是我的應用程序模塊： -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
import { BlockUIModule } from 'ng-block-ui'; 
import { ToastModule } from 'ng2-toastr/ng2-toastr'; 
import { BrowserAnimationsModule } from '@angular/platform- 
browser/animations'; 
import { NgxPaginationModule } from 'ngx-pagination'; 
import { Ng2OrderModule } from 'ng2-order-pipe'; 
import { ModalModule } from 'angular2-modal'; 
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap'; 
import { Select2Module } from 'ng2-select2'; 

//Components 
import { AppComponent } from './app.component'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { ConfigurationComponent } from 
'./configuration/configuration.component'; 
import { ConfigurationAddComponent } from './configuration/configuration- 
add.component'; 

//Services 
import { FileService } from './services/file.service'; 
import { ConfigurationService } from './services/configuration.service'; 

//Guards 
import { ConfigurationGuard } from "./configuration/configuration.guard"; 

//Pipes 
import { OrderByPipe } from './shared/order-by.pipe'; 
import { FilterAnyPipe } from './shared/filter-any.pipe'; 

//Modal 
import { AdditionCalculateWindow } from "./configuration/configuration-add- 
file-spec-name-template"; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    DashboardComponent, 
    ConfigurationComponent, 
    ConfigurationAddComponent, 
    OrderByPipe, 
    FilterAnyPipe 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule, 
    HttpModule, 
    BlockUIModule, 
    BrowserAnimationsModule, 
    NgxPaginationModule, 
    Select2Module, 
    Ng2OrderModule, 
    RouterModule.forRoot([ 
     { path: 'dashboard', component: DashboardComponent }, 
     { path: 'configuration', canActivate: [ConfigurationGuard], component: 
ConfigurationComponent }, 
     { path: 'configuration-add/:fileSpecId', component: 
ConfigurationAddComponent }, 
     { path: 'configuration-add', component: ConfigurationAddComponent }, 
     { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
     { path: '**', redirectTo: 'dashboard', pathMatch: 'full' }, 
    ]), 
    NgbModule.forRoot(), 
    ToastModule.forRoot(), 
    ModalModule.forRoot(), 
    BootstrapModalModule 
    ], 
    providers: [FileService, ConfigurationService, ConfigurationGuard], 
    bootstrap: [AppComponent], 
    // IMPORTANT: 
    // Since 'AdditionCalculateWindow' is never explicitly used (in a 
    template) 
    // we must tell angular about it. 
    entryComponents: [ AdditionCalculateWindow ] 
}) 
export class AppModule { }

任何想法是什麼問題？

來源

2017-06-27 BigBytes

正如錯誤所述，「Component AdditionCalculateWindow不是任何NgModule的一部分」。你需要在你的NgModule的'declarations'列表中添加'AdditionCalculateWindow'。 –

沒錯，就是這樣！謝謝你解決了這個問題 – BigBytes