File naming conventions for components

[leon]

Naming all components .component.ts isn't describing them good enough.
We should introduce different kinds of components to angular-cli to simplify getting started with the different kinds of components.

The component types I currently use are:

*.component.ts
A view component which only takes in data via inputs and always has changeDetection: ChangeDetectionStrategy.OnPush

*.container.ts
A container component (Smart component) that usually doesn't have inputs and instead uses services and RxJS to supply data to view components.

*.route.ts
A component that is part of the router.
It's a lot like a container component when it comes to mindset. It usually has an injected private route: ActivatedRoute.
This component also doesn't get included in the app.modules.ts but in the app-routing.module.ts.
Thus containing all route specific things in the routing module.

Suggestion

As you can see there are many different kinds of components that potentially could have different default imports and different filename suffixes.

By having these blueprints available and by standardizing the naming conventions of them the apps produced by angular-cli would look more alike.

Implementation

As a first step we could allow using custom suffixes:

ng generate component dashboard route

//
installing component
  create src/app/dashboard/dashboard.route.scss
  create src/app/dashboard/dashboard.route.html
  create src/app/dashboard/dashboard.route.spec.ts
  create src/app/dashboard/dashboard.route.ts
  update src/app/app.module.ts

And as a second step we could create the blueprints for the component types that people most want.

Is this something that could be considered?

[Meligy]

We might consider creating a suffix parameter that you can set to false.

It's probably low priority though.

The CLI is more about creating defaults for you. You can still create your own components or rename them etc. It won't be worth adding the extra bit of complexity to mess with filename at the very moment - I guess (disclaimer).

[leon]

I'll gladly do a pull request for it.
This was just a feeler to see if it would be possible to get it included at all.

I've been doing the renaming of files for a couple of months now, and I'm sick of it :)

I know that we adhere to the styleguide, but if there are more developers out there that feel that there is something missing in the style guide shouldn't we be able to iterate over it?

[delasteve]

The CLI adheres to the style guide on the Angular website.

https://angular.io/styleguide#!#naming

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

As @Meligy said, it's going to add a bit of complexity for not much benefit. We currently have a limited set of blueprints, and have to create new ones for each new type people request. This is why we only implement the ones listed in the style guide.

I could see a feature where you are able to create your own blueprints or adopt others'. This would be when the add-on system is created, though.

[Brocco]

As stated by @delasteve stated above, the CLI is aligned to the styles within the the style guide.

@leon I understand that this does not align with the naming convention that you have adopted. The good news is that this type of customization will be available once custom blueprints are implemented.

Closing this in favor of custom blueprints.

[Maximaximum]

Not sure what is 'custom blueprints', but it would be great to tweak the general naming conventions a bit.

For example, the dialog components are actually quite different from the simple components (they need to be added to NgModule.entryComponents, they need tests to be build in a totally different way etc).

It would be great if angular style guide allowed (and angular cli supported) different naming convention for dialogs.

[skorunka]

Were there any updates on this? I like that idea to have more different types of components. Renaming is an option, but it just wastes developer's time, when cli could do that instead?

[delasteve]

@skorunka you can create your own custom schematics now.

See: https://medium.com/@tomastrajan/%EF%B8%8F-how-to-create-your-first-custom-angular-schematics-with-ease-%EF%B8%8F-bca859f3055d or various other articles on the topic

[hoang-innomize]

Understand about styles guides, but it is nice if the CLI supports this feature, we can create custom schematics but it takes time. In our projects, we support some suffix such as Component, Page, Modal, Container, etc.

Does anyone know whether we have any public schematic support this feature?

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