Custom component suffix --suffix=Route

[leon]

🚀 Feature request

Command (mark with an x)

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

Description

I would like to be able to change the default .component suffix to something more descriptive.

As most of apps are comprised of components, it would be of more use to easily be able to separate the components into their different type.

nav-bar.ui.ts // presentational component
invoices.container.ts // smart component
users.route.ts // route component

The Style guide mentions that you can add your own types

Do use consistent type names for all components following a pattern that describes the component's feature then its type. A recommended pattern is feature.type.ts.

Do use conventional type names including .service, .component, .pipe, .module, and .directive. Invent additional type names if you must but take care not to create too many.

And I think we should enable people to choose their own file layouts.
This simple addition to the component generator would make this possible without having to resort to manually rename all the source files after generating a new component.

I did previously suggest it here #3913 but the timing was not right and it fell through.

Describe the solution you'd like

To be able to supply the suffix for the component generator

ng g component Users --suffix=Route

I will gladly submit a pull request if you agree that it would be a good feature.

Describe alternatives you've considered

Rename files manually

Manually renaming all files. Extremely tedious and boring

Creating a custom schematic

Yes I've done this, but because different projects use different base schematics, some cli some nx, I find I usually don't bother.
It could get better with #12157
Then people could create special schematics and you could simply add your favorite generators to your project.

[vikerman]

We still want to stick to the Angular styleguide in the CLI schematics. It is easy to rename components in the IDE.

Creating a custom schematics might be the way to go here if you really wanted this behavior.

Thanks

[leon]

The styleguide says "Invent additional type names if you must but take care not to create too many." which to me sounds like if we find new types which makes sense to us, it's okey.

I think this would enable us to better state our intent and by looking at the file we can clearly see that it's a component, so why do we need to keep it in the filenames?

I have multiple sub types of components that I build my apps from:

.dialog
.form
.ui
.container

at the moment I'm naming the classes that way

RemoveProjectDialogComponent
AddUserFormComponent
UserCardUIComponent

Which also leads to really long filenames

remove-project-dialog.component.ts
add-user-form.component.ts
...

I find it would be more pleasing to have:

remove-project.dialog.ts
add-user.form.ts
user-card.ui.ts

and the same goes for the imports which are really long and hard to eye over.

I cannot be the only one not loving the overly complex names.
I hope you can see it from my point of view and take this into consideration.

[vikerman]

@leon - The class schematics already has a --type options which is similar to what you are requesting. Is it possible for you to create a PR to add a similar option to the component schematics? All the css, html, spec will also need to have the same type suffix.

[leon]

I will add a PR to add a --type option that will set all all spec, class and filenames accordingly.

[leon]

The PR is complete with all tests passing.
Is there anywhere else that I need to add the option so that documentation is up to date?

[clydin]

Documentation will be automatically generated once the version is released.

[leon]

My PR got merged, so I'll close this :)

🎆

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