Missing --create-module option on ng g component command

[matheusdavidson]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [x] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, this feature was present in @angular/cli@8.1.2

Description

Latest CLI is missing the option --create-module for generate component schematic, this was a very useful feature to create a component with its own module:
ng g component --create-module my-component

🔬 Minimal Reproduction

ng g component --create-module my-component

🔥 Exception or Error

Unknown option: '--create-module'
Unknown option: 'my-component'

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.3
Node: 10.15.3
OS: darwin x64
Angular: 8.2.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.3
@angular-devkit/build-angular     0.803.3
@angular-devkit/build-optimizer   0.803.3
@angular-devkit/build-webpack     0.803.3
@angular-devkit/core              8.3.3
@angular-devkit/schematics        8.3.3
@angular/cdk                      8.1.4
@angular/cli                      8.3.3
@angular/flex-layout              8.0.0-beta.27
@angular/material                 8.1.4
@ngtools/webpack                  8.3.3
@schematics/angular               8.3.3
@schematics/update                0.803.3
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

[clydin]

The 8.1.2 version of the component schematic does not appear to have such an option.
JSON schema for the schematic is here: https://github.com/angular/angular-cli/blob/63811fc04f787609994f40135913eb02bdc10003/packages/schematics/angular/component/schema.json

Were the official Angular schematics being used in the previous project?

[matheusdavidson]

Hi, sorry, in the project that i'm able to use --create-module option the version is 8.1.3.

Funny thing is that even in 8.1.3 this options is not listed in schema.json, but i just made a test in that project and i'm able to use the option, this is the ng version information for the project i'm able to use:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.1.3
Node: 10.15.3
OS: darwin x64
Angular: 8.1.3
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@angular/animations               8.2.1
@angular/cdk                      8.1.2
@angular/flex-layout              8.0.0-beta.26
@angular/material                 8.1.2
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.2

Also, if i do ng g component --help, --create-module is listed as an option:

And here is a print of what happens when i use ng g component --create-module my-component in the project using 8.1.3

[matheusdavidson]

Yes, i was using the official angular schematics, although i have ionic installed in the project

[matheusdavidson]

I see whats happening, ionic has a package called @ionic/angular-toolkit, i think this override the original ng g component behavior, i found createModule there.

This is a nice feature, would be good to have as an option in angular as well

[alan-agius4]

@matheusdavidson, can you explain the user case that you find —createModule useful?

[matheusdavidson]

Well, to get full benefit of lazy loading, i think it's better to package each component in its own module so you can load only what you really need in each piece of your application.

Example, imagine you have a user.module with the whole CRUD:

• user-create-route.component
• user-list-route.component
• user-edit-route.component
• user-view-route.component
• user-form.component
• user-list.component

you can create a user.module and package all these components there, but if you need to show a user list on your dashboard you would have to load the whole user.module in to your dashboard.module. To avoid that, usually i pack every component in its own module, so, in this example i would only load user-list.module in dashboard.module so i can use only user-list.component to show the user list and reduce the bundle size in dashboard, where the user mostly access a normal admin.

That's why normally to create a component, lets say for a user list, i usually:

• Create a user-list.module
• Create a user-list.component
• Import this module/component anywhere i need, instead of loading a whole user.module just for a listing.

[alan-agius4]

For lazy loading we do have a separate schematic. This schematic generates a module and lazy loaded route.

Ex:

ng generate module users --route user-list --module app.module

This will generate a a lazy module named UsersModule with a lazy route with path /users-list for UsersComponent

[matheusdavidson]

Yeah, i know, i use that one to generate routes, but --create-module is useful for components that goes inside the routes.

[clydin]

The above mentioned ‘—route’ command creates the component as well which is the exact use case described above. It also adds the newly created module as a named route in the parent module.

Based on the described use case, the functional is more completely covered by existing functionally. However, thank you for sharing details on your uses of the CLI.

[matheusdavidson]

I think my use case is the same as Angular Material does, everything is packed in its own module:
MatInputModule, MatButtonModule, ... and so on.

--route does not solve this because i don't want to create a route and lazy load it somewhere, i just want to create a component. There is no point of lazy load things if you gonna chunk a bunch of components there, sometimes the user will just see one route and so many other things will get loaded for no reason.

I believe the best way to get full benefit out of lazy loading is to separate eveything in small modules.

[luiscmas]

Hi @clydin , I suppose that lazy loading a component is one of the improvements of Ivy, and when it becomes the default, @angular/cli will have some implementation option similar to the one @matheusdavidson is asking for.

Maybe after this issue is closed: angular/angular#23284

Use case: https://blog.angularindepth.com/asynchronous-modules-and-components-in-angular-ivy-1c1d79d45bd3

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