未找到组件的组件工厂。 Angular2材料对话框

Question

我特林显示自定义对话框，但我得到这个错误：

HeaderMenuComponent.html:41 ERROR Error: No component factory found for RegisterFormComponent. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (core.es5.js:3202) at CodegenComponentFactoryResolver.webpackJsonp.../../../core/@angular/core.es5.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.es5.js:3267) at PortalHostDirective.webpackJsonp.../../../cdk/@angular/cdk.es5.js.PortalHostDirective.attachComponentPortal (cdk.es5.js:2706) at MdDialogContainer.webpackJsonp.../../../material/@angular/material.es5.js.MdDialogContainer.attachComponentPortal (material.es5.js:17625) at MdDialog.webpackJsonp.../../../material/@angular/material.es5.js.MdDialog._attachDialogContent (material.es5.js:17901) at MdDialog.webpackJsonp.../../../material/@angular/material.es5.js.MdDialog.open (material.es5.js:17813) at HeaderMenuComponent.webpackJsonp.../../../../../src/app/header-menu/header-menu.component.ts.HeaderMenuComponent.showRegister (header-menu.component.ts:64) at Object.eval [as handleEvent] (HeaderMenuComponent.html:41) at handleEvent (core.es5.js:11997) at callWithDebugContext (core.es5.js:13458)

我已经尝试在这里mentionned的解决方案来解决它：Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?。

但它不适用于我。

这里是我的代码： app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { CollapseModule } from 'ngx-bootstrap/collapse'; 
import {AccordionModule} from 'ngx-bootstrap/accordion'; 
import {TabsModule} from 'ngx-bootstrap/tabs'; 
import {AlertModule} from 'ngx-bootstrap/alert'; 
import { ModalModule } from 'ngx-bootstrap/modal'; 
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome'; 
import { HttpModule } from '@angular/http'; 
import { CoolStorageModule } from 'angular2-cool-storage'; 
import { SimpleNotificationsModule } from 'angular2-notifications'; 
import {JasperoAlertsModule} from '@jaspero/ng2-alerts' 
import {TreeModule} from 'angular-tree-component'; 
import {hammerjs} from 'hammerjs'; 
import { RouterModule, Routes } from '@angular/router'; 
import {MdDialogModule} from '@angular/material'; 
import { MaterialModule } from '@angular/material'; 

import { AppComponent } from './app.component'; 
import { HeaderMenuComponent } from './header-menu/header-menu.component'; 
import { LoginFormComponent } from './login-form/login-form.component'; 
import { CatTreeviewComponent } from './cat-treeview/cat-treeview.component'; 

import { UserService } from './user.service'; 
import {CategorieService} from './categorie.service'; 
import {ArticleService} from './article.service'; 
import { FooterComponent } from './footer/footer.component'; 
import { LayoutComponent } from './layout/layout.component'; 
import { CategorieComponent } from './categorie/categorie.component'; 
import { ArticlecontainerComponent } from './articlecontainer/articlecontainer.component'; 
import { ArticleComponent } from './article/article.component'; 
import { RegisterFormComponent } from './register-form/register-form.component'; 




@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeaderMenuComponent, 
    LoginFormComponent, 
    CatTreeviewComponent, 
    FooterComponent, 
    LayoutComponent, 
    CategorieComponent, 
    ArticlecontainerComponent, 
    ArticleComponent, 
    RegisterFormComponent 
    ], 
    entryComponents: [ 
    RegisterFormComponent 
    ], 
    imports: [ 
    BrowserModule, 
    CollapseModule.forRoot(), 
    AccordionModule.forRoot(), 
    ModalModule.forRoot(), 
    TabsModule.forRoot(), 
    AlertModule.forRoot(), 
    FormsModule, 
    Angular2FontawesomeModule, HttpModule, 
    CoolStorageModule, 
    BrowserAnimationsModule, 
    SimpleNotificationsModule.forRoot(), 
    TreeModule, 
    MaterialModule, 
    JasperoAlertsModule, 
    MdDialogModule, 
    RouterModule.forRoot([ 
     { 
     path:'index', 
     component:HeaderMenuComponent 
     } 
    ]) 
    ], 
    providers: [UserService,CategorieService,ArticleService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

这里是我的头组件，我想打电话给我注册组件：什么我”

import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core'; 
import {CoolLocalStorage} from 'angular2-cool-storage'; 
import { NotificationsService } from 'angular2-notifications'; 
import {MdDialog} from '@angular/material'; 
import { RegisterFormComponent } from '../register-form/register-form.component'; 

@Component({ 
    selector: 'app-header-menu', 
    templateUrl: './header-menu.component.html', 
    styleUrls: ['./header-menu.component.css'] 
}) 
export class HeaderMenuComponent implements OnInit { 
    @Input() currentUser:any; 
    @Output() onSuccess = new EventEmitter<string>(); 
    public localStorage:CoolLocalStorage; 
    public isCollapsed:boolean = false; 
    public isDropdownCollapsed:boolean = true; 
    toast:any; 

    public options = { 
    position: ["bottom,right"], 
    timeOut: 5000, 
    lastOnBottom: true, 
    clickToClose:true 
} 
    public collapsed(event:any):void{ 
    console.log(event); 
    } 

    public expanded(event:any):void{ 
    console.log(event); 
    } 

closeModal() {} 

    logout() 
    { 
    this.localStorage.removeItem('wikiCurrentUser'); 
    window.location.reload(); 
    } 


    constructor(localStorage:CoolLocalStorage,private _service: NotificationsService,public dialog:MdDialog) { 
    this.localStorage = localStorage; 
    } 

    ngOnInit() { 
    this.currentUser = this.localStorage.getObject('wikiCurrentUser'); 
    } 

    showSuccess(mess:string) 
    { 
    // if(this.toast != null) 
    // this._service.remove(this.toast.id); 
    // this.toast = this._service.info("Enregistrement terminé!",mess); 
    // setTimeout(()=>{ 
    // window.location.reload(); 
    // },5000); 

    this.onSuccess.emit(mess); 
    } 

    showRegister() 
    { 
    this.dialog.open(RegisterFormComponent); 
    } 

} 

任何想法做错了吗？感谢你们！

Answer 1

今天我已经得到了同样的问题，这里是我的步骤来解决这个问题：

1. 在app.module.ts（像你这样）的entryComponent块声明模态对话框组件：

   entryComponents: [ 
       AddEventDialogComponent 
   ], 
   

2. 声明并从我的应用程序的子模块将其导出（我做一个简单的日历）：

   @NgModule({ 
   imports: [ 
       AppCommonModule 
   ], 
   declarations: [ 
       ... 
       CalendarComponent, 
       AddEventDialogComponent 
   ], 
   exports: [ 
       CalendarComponent, 
       AddEventDialogComponent 
   ], 
   providers:[ 
       MatDialog, 
       ... 
   ] 
   

查看完整源代码和在这里运行的应用程序：Calendar。 （提交编号为9的模式窗口）