Components: Error: The selector (...) did not match any elements

[Bartosz-D3V]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Example code snippet in the official Angular Material documentation should not throw any error.

What is the current behavior?

When running example Plunker code related to Modals, Angular throws an error:
'Error: The selector "dialog-result-example-dialog" did not match any elements'

What are the steps to reproduce?

Open this Plunker code:
https://plnkr.co/edit/F6O5ltdCJrVn3r2qw4DU?p=preview
And then open a console from debugging tools after the application will load.

What is the use-case or motivation for changing an existing behavior?

Application throws an error, although the modal window is opening correctly.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Material: 2.0.0-beta.8

Is there anything else we should know?

URL of the Plunker example comes from official Angular Material documentation for Modals:
https://material.angular.io/components/dialog/examples

[julianobrasil]

@Bartosz-D3V, just correcting the link to plunk: https://plnkr.co/edit/F6O5ltdCJrVn3r2qw4DU?p=preview

[Bartosz-D3V]

@julianobrasil, thank you. I have just edited my comment to reflect this change.

[julianobrasil]

The problem is the Dialog being bootstraped along with the main component (probably copy-and-paste effect):

bootstrap: [ DialogResultExample, DialogResultExampleDialog ]

It should be just:

bootstrap: [ DialogResultExample ]

Fixed plunk: https://plnkr.co/edit/JhJkK4a9adQOyIgWXpWy?p=preview

[Bartosz-D3V]

@julianobrasil, I have just checked your Plunker, it looks perfect 👍 .
Angular Material documentation should be updated accordingly.
Also, the plunker in the official documentation should contains entryComponent in main.ts:

entryComponents: [DialogResultExampleDialog],

Just like you did.
Otherwise Angular throws an error that no component factory was found.

[amcdnl]

The issue stems from the componentName is being assigned to the selectors - https://github.com/angular/material2/blob/master/src/material-examples/example-data.ts#L39.

The selectors contains the name of both components for the example, in the case of a dialog its both the root and the dialog component. https://github.com/angular/material2/blob/38b4265704c7147ff609002f7704ddf11250a9ba/src/material-examples/example-module.ts#L141 . This seems to be the case before and after the automatic example module generation as the referenced file pre-dates automatic module generation.

The PlunkerWriter then replaces the MaterialDocsExample with the componentName variable. https://github.com/angular/material.angular.io/blob/master/src/app/shared/plunker/plunker-writer.ts#L118

This results is that its replaced with both components in the bootstrap and declarations. https://github.com/angular/material.angular.io/blob/master/src/assets/plunker/main.ts#L93-L94

I'm not sure how this ever worked for Dialogs as none of these files have changed recently.

[willshowell]

@amcdnl It has been broken for a few months at least and AFAIK it has never worked

[amcdnl]

Should be resolved in this PR to material.angular.io repo: https://github.com/angular/material.angular.io/pull/228

[jelbourn]

Should be resolved per that PR linked

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}