Angular2 Eintrag Komponenten funktionieren nicht

Ich versuche, ein Tutorial zu folgen ein benutzerdefiniertes Dialogkomponente zu meinem Projekt hinzuzufügen aber ich die folgenden Fehlermeldung erhalten, wenn ich um die Komponente der entryComponents Sammlung in meinem Modul hinzufügen: -Angular2 Eintrag Komponenten funktionieren nicht

Hier ist meine Komponente: -

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; 
} 
}

Und hier ist meine App-Modul: -

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 { }

Irgendwelche Ideen, was das Problem ist?

Quelle

2017-06-27 BigBytes

Wie der Fehler sagt, 'Component AdditionCalculateWindow ist nicht Teil eines NgModule'. Sie müssen 'AdditionalCalculateWindow' zu Ihrer 'Deklarationsliste' in Ihrem NgModule hinzufügen. –

Ja das war es! Danke, dass du das Problem gelöst hast – BigBytes

sollten Sie fügen AdditionCalculateWindow auch auf Ihre declarations

Quelle

2017-06-27 12:19:58 crash

Sie haben AdditionCalculateWindow nicht in Ihr ngModule importiert. In import:[AdditionCalculateWindow,...]

Quelle

2017-06-27 12:17:32

löste das Problem, indem sie AdditionCalculateWindow auf die Erklärungen Liste hinzufügen. Interessanterweise führt die Demo das eigentlich nicht durch, aber es löste mein Problem

Quelle

2017-06-27 12:51:35 BigBytes

Angular2 Eintrag Komponenten funktionieren nicht

Antwort

Verwandte Themen