Importing any Material module imports FormsModule when using CLI

[benelliott]

Bug, feature request, or proposal:

Perhaps I am misunderstanding what is going on here but it seems that importing any (sub)module from @angular/material will cause @angular/forms content to be included in the output vendor bundle when using @angular/cli.

What is the expected behavior?

Either for the external dependencies of modules to be explicitly stated or for an unrelated module not to be included in the output vendor bundle.

What is the current behavior?

Content from @angular/forms is included in vendor.bundle.js when importing a trivial Material module like MdCardModule.

What are the steps to reproduce?

1. Install Angular CLI (v1.2.2): npm i -g @angular/cli
2. Create a new project: ng new temp
3. Execute a development build: ng build
4. Verify that no content from @angular/forms is included in the vendor bundle (e.g. search for a symbol like FormBuilder)
5. Import MdCardModule: npm i -S @angular/material @angular/cdk and add MdCardModule to the NgModule's imports
6. Execute another development build: ng build
7. Verify that @angular/forms content is now included in the vendor bundle

Note: it does seem like this content is removed from a production build (as it is unused). My query is why it is there in the first place.

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

Module dependencies should be clear to the developer.

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

Angular 4.3.1, Angular CLI 1.2.2, Material 2.0.0-beta.8, Windows 10

Is there anything else we should know?

No

[julianobrasil]

Some components depend on @angular/forms, but the code is being refactored to take it off: #5871

[benelliott]

I understand that, my question is more why modules like MdCardModule will still cause it to be imported when they don't seem to use any of its functionality.

[benelliott]

Oh right, do you mean that it's because at least one Material submodule imports it, and these submodules all exist in the same file, so importing any one submodule will import the ES6 module imports of that Material bundle file and thus cause things like Forms to be included? This would explain why it does not appear in production as the unreferenced symbol import is shaken out by Webpack.

[julianobrasil]

No, in fact I've missed the part you mentioned the card module, sorry. I've read about the refactoring more than once among the issues and the PR's. I'm really not sure of how the forms module is being imported inside the project, but after a fast search, I've found the forms module imported only in components (nothing about a shared library and also nothing about the MdCard importing other component that in turn import forms). In this case I don't know why the forms is being imported in dev environment just because of MdCard.

[willshowell]

@benelliott I think your hunch is correct. If you import just MdCardModule, you'll see the other material modules in there as well like MdSelectModule (dev build ofc). #5871 will merge soon and you should take another look then

[julianobrasil]

@benelliott, it happens that your problem is a real not solved yet issue :#4137 (comment)

[jelbourn]

@IgorMinar @kara is this solved by the same underlying work on #4137?

[jelbourn]

Duplicate of #4137

[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.}