md-dialog does not work in seperate module.

[Ng Jun Yen]

I tried using md-dialog in different module other than the root AppModule and it doesn't seem to work. I am getting this error whenever I try MdDialog.open(DialogComponent, options) and a dialog pops up but is not filled with any of the UI elements thats suppose to be in it. The dialog worked perfectly when it was in the root AppModule.

Angular: 2.4.3

Angular Material: 2.0.0-beta-1

Anyone managed to get MdDialog in a different module than AppModule? 

Heres what I am doing:

test.module.ts

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

import { CommonModule } from '@angular/common';

import { FormsModule } from '@angular/forms';

import { MaterialModule } from '@angular/material';

import { ViewComponent } from './view.component';

import { ListViewComponent } from './list-view/list-view.component';

import { TestDialog } from './dialogs/add-subscription/add-subscription.dialog';

@NgModule({

  declarations: [

    ViewComponent, 

    ListViewComponent,

    DetailViewComponent,

    TestDialog

  ],

  imports: [

    CommonModule,

    FormsModule,

    MaterialModule,

    ViewRoutingModule

  ],

  entryComponents: [TestDialog]

})

export class TestModule { }

list-view.component.ts

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

import { MdDialog, MdDialogRef } from '@angular/material/dialog'

import { TestDialog } from '../dialogs/test/test.dialog'

@Component({

  selector: 'app-list-view',

  templateUrl: './list-view.component.html',

  styleUrls: ['./list-view.component.css']

})

export class ListViewComponent {

  testDialog: MdDialogRef<TestDialog>

  constructor(public dialogs: MdDialog) { }

  addSubscription(): void {

    this.testDialog = this.dialogs.open(TestDialog, {

      disableClose: false

    });

    this.testDialog.afterClosed().subscribe(result => console.log(result));

  }

}

test.dialog.ts

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

import { MdDialogRef } from '@angular/material/dialog';

@Component({

    selector: 'test-dialog',

    templateUrl: './test.dialog.html',

    styleUrls: ['./test.dialog.css']

})

export class TestDialog {

    constructor(public dialogRef: MdDialogRef<TestDialog>) { }

}

[Ng Jun Yen]

The reason I got those weird error messages was because I was using the incorrect version of zone.js. I have fixed that and now I know the true cause of the dialog not appearing correctly.  For some reason although I am declaring the dialog in TestModule I am getting this error "Error: No component factory found for TestDialog. Did you add it to @NgModule.entryComponents?". Not declaring TestDialog in TestModule and doing it instead in AppModule fixed the problem but that sort of defeats the purpose of modules to lazy load components. So can anyone from the Angular Material team comment on this issue? Is this a bug or expected behaviour?

[Ng Jun Yen]

Possibly related to this issue: https://github.com/angular/material2/issues/1765.

[Ng Jun Yen]

Already been reported by another user here: https://github.com/angular/material2/issues/2517. Waiting on fix.

[Michael Prentice]

Yep, and it looks like you can use the latest master to get this working according to this comment.

Michael Prentice

DevIntent

GDG Space Coast

[Ng Jun Yen]

Thanks for the heads up. It works now.!