Angular2 Entry Components Not Working

Question

I'm trying to follow a tutorial to add a custom dialog component to my project however I'm getting the following error when I add the component to the entryComponents collection in my module:-

Here's my component:-

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

And here is my app module:-

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

Any ideas what the issue is?

As the error says, Component AdditionCalculateWindow is not part of any NgModule. you need to add AdditionCalculateWindow to your declarations list in your NgModule. — Tyler Jennings

crash crash · Accepted Answer · 2017-06-27T12:19:58

1

votes

You should add AdditionCalculateWindow also to your declarations

Angular2 Entry Components Not Working

3 Answers