removing module.id does not resolve issues in Webpack builds

[gregbown]

I believe the fix that resolved all errors stemming from module.id with Angular 2 rc5 in webpack builds is this fix to metadata_resolver
angular/angular@f54f9ef

Removing moduleId from md-input breaks functionality for all material 2 components in webpack (unsure about other build processes) when using attributes like formControlName and placholder.
The error:
zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'md-input'.
If 'md-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.

If I add schemas: [CUSTOM_ELEMENTS_SCHEMA] to @NgModule I get the error.
“No value accessor for form control” even though control is named.

Additionally, removal of module.id seems to cause display and positioning errors.

Adding back module.id into all material components restores all functionality provided the fix to metadata_resolver is in place and ther are no errors or display issues.

Versions: Angular 2 rc5, Material 2 alpha 7-2, Windows 10, Chrome

Thank you

[devversion]

The fix on Angular 2 is definitely the correct one. The original issue isn't coming from Angular Material 2.

We were adding the fix, to remove all module.id references to our distributed files, because it doesn't make sense to have the module.id definition on the component metadata, when the template and styleUrls are already inlined.

I personally use alpha.7-2 with Webpack and the fix worked for me.

In general, removing the module.id should not introduce any "positioning" issues.
You probably have a real error in your template.

Would be good to share some code, if so.

[gregbown]

I do not think Webpack is possible in a plunkr so here is what I believe is the relevant code.
Thank you for your prompt response, Paul.

https://gist.github.com/gregbown/f1545665a35fdf8b2b7f8e0aaaaa6197

[devversion]

It is definitely not possible to share Webpack 😄 - You are right, I just asked for some code snippets to take a closer look for common issues.

Would be good if you transform your code snippets into an external snippet.

e.g http://hastebin.com

[gregbown]

Thanks for the tip, I'm a bit of a git rookie, we have our own version control internally.
Here is the snippet https://gist.github.com/gregbown/f1545665a35fdf8b2b7f8e0aaaaa6197

[devversion]

@gregbown At first look I couldn't really find anything wrong in your shared code. But I have to say I don't had really much time to look into it.

I'm still assuming this doe relates to something else, and not to the module.id removal.

If the module.id removal introduced some issues, then there would be probably more issues (than one)

Also I'm running alpha.7-2 personally as well and it seems to work like a charm.

[gregbown]

Update:
I just added MdTabsModule to my project and the tabs don't event render. As soon as I added the moduleId: module.id, to the MdTabGroup the tabs render with full functionality. I have tried changing loaders and I have verified my ts config matches the starter projects out there, however; none of the starter projects seem to have updated to Angular 2 rc5 & material 7-2. Could you recommend a project that is up to date? or possibly share your setup?

[devversion]

I just tested it again to be sure that I don't miss anything.

The Tabs component seems to work fine.

Here is some basic setup to share

• https://gist.github.com/DevVersion/17eeeb2e5d717c20baf70abc762e58df

Just to repeat my self, it doesn't even make sense that it works with the module.id and without the module.id not..

[gregbown]

Thank you Paul. I believe the issue was in my webpack configuration, I may never know exactly where. I scrapped my hacked together webpack.config and started with the bare minimum. I used https://github.com/preboot/angular2-webpack/webpack.config.js as a starting point, modifying the loaders and paths as needed.

Thanks again for your time.

[angular-automatic-lock-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.}