我正在尝试按照教程向我的项目添加自定义对话框组件,但是当我将组件添加到模块中的entryComponents集合时,我收到以下错误: -
错误:未捕获(在承诺中):错误:组件AdditionCalculateWindow不是任何NgModule的一部分,或者模块尚未导入到您的模块中。 错误:组件AdditionCalculateWindow不是任何NgModule的一部分,或者模块尚未导入模块。 在JitCompiler._createCompiledHostTemplate(http://localhost:4200/vendor.bundle.js:86877:19) 在http://localhost:4200/vendor.bundle.js:86843:37 at Array.forEach(native) 在http://localhost:4200/vendor.bundle.js:86841:45 at Array.forEach(native) 在JitCompiler._compileComponents(http://localhost:4200/vendor.bundle.js:86830:43) 在createResult(http://localhost:4200/vendor.bundle.js:86731:19) 在ZoneDelegate.webpackJsonp.716.ZoneDelegate.invoke(http://localhost:4200/polyfills.bundle.js:2779:26) 在Zone.webpackJsonp.716.Zone.run(http://localhost:4200/polyfills.bundle.js:2529:43) 在http://localhost:4200/polyfills.bundle.js:3205:57 在JitCompiler._createCompiledHostTemplate(http://localhost:4200/vendor.bundle.js:86877:19) 在http://localhost:4200/vendor.bundle.js:86843:37 at Array.forEach(native) 在http://localhost:4200/vendor.bundle.js:86841:45 at Array.forEach(native) 在JitCompiler._compileComponents(http://localhost:4200/vendor.bundle.js:86830:43) 在createResult(http://localhost:4200/vendor.bundle.js:86731:19) 在ZoneDelegate.webpackJsonp.716.ZoneDelegate.invoke(http://localhost:4200/polyfills.bundle.js:2779:26) 在Zone.webpackJsonp.716.Zone.run(http://localhost:4200/polyfills.bundle.js:2529:43) 在http://localhost:4200/polyfills.bundle.js:3205:57 at resolvePromise(http://localhost:4200/polyfills.bundle.js:3157:31) at resolvePromise(http://localhost:4200/polyfills.bundle.js:3128:17) 在http://localhost:4200/polyfills.bundle.js:3205:17 在ZoneDelegate.webpackJsonp.716.ZoneDelegate.invokeTask(http://localhost:4200/polyfills.bundle.js:2812:31) 在Zone.webpackJsonp.716.Zone.runTask(http://localhost:4200/polyfills.bundle.js:2579:47) 在drainMicroTaskQueue(http://localhost:4200/polyfills.bundle.js:2972:35) 在
这是我的组成部分: -
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;
}
}
这是我的app模块: -
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 { }
任何想法是什么问题?
答案 0 :(得分:1)
您还应将AdditionCalculateWindow
添加到declarations
答案 1 :(得分:0)
您没有在ngModule中导入AdditionCalculateWindow
。
加
import:[AdditionCalculateWindow,...]
答案 2 :(得分:0)
通过将AdditionCalculateWindow添加到声明列表来解决问题。有趣的是,该演示实际上并没有这样做,但它解决了我的问题