Angular-Cli camelCase name

Question

It seems that when I used angular cli to generate components, services etc.by this command and name of component

ng g component myApp

It generate component folder and other files such as

my-app.component.ts

instead myapp.component.ts

My question is: Is there any command to generate components, services, etc. with camelCase names.

I researched for it, but nothing worked.

As of this writing, this feature is not available, but an issue has been opened on the angular-cli GitHub repo and it should be implemented soon. See this link for more info: angular-cli camelCase naming convention — Mwiza
– Mwiza, Commented Jul 17, 2017 at 18:05
Please note that the CLI follows the Angular Style Guide: angular.io/guide/styleguide. — sanka rohith
– sanka rohith, Commented Apr 2, 2018 at 18:14
Angular is considered opinionated, so for things like that you're just stuck with it. It is a conscious choice on their part to enforce kebab-case for selectors and folder/file names for components. This is beneficial because it reduces cognitive load by making it easy to visually distinguish between them and component names which are PascalCase — Samwise Ganges
– Samwise Ganges, Commented Sep 26, 2024 at 17:29

mruanova · Accepted Answer · 2018-07-19 18:36:36Z

10

Angular Style Guide explicitly says to use my-app.component.ts for file names.

dash-case (or "kebab-case"): descriptive part of file names, component selectors

Reference: https://angular.io/guide/glossary

answered Jul 19, 2018 at 18:36

mruanova

7,1736 gold badges41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roman Hnatiuk Aug 2 at 11:58

Sure, we know. But what is the motivation/reason for this strange convention? Why is BigNiceComponent in big-nice.component.* instead of the logical BigNiceComponent.*?

mruanova Aug 3 at 13:28

The motivation is to avoid upper case in a URL, it would be a problem if you had stackoverflow.com/BigNiceComponent.ts and stackoverflow.com/bignicecomponent.ts or stackoverflow.com/big-nice-component.ts

Collectives™ on Stack Overflow

Angular-Cli camelCase name

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related