camelCase vs. kebab-case in Angular CLI
Angular CLI commands accept a variety of options, like ng build --prod.
When writing these options, do you choose camelCase or kebab-case? The official Angular CLI documentation doesn't always make a clear recommendation. Let's explore this ambiguity and see if we can settle on the best approach.
And, why not? We get to enjoy a graphic featuring both a camel and a kebab while we're at it.
Quick Answer:
If you're in a hurry, here's the summary: Angular CLI accepts options in both camelCase and kebab-case.
Understanding the Two Naming Conventions
Let's quickly examine the distinction between camelCase and kebab-case, and see where each is typically applied in an Angular project.
What is camelCase?
In camelCase, words are joined without spaces, with each subsequent word starting with a capital letter. This style can be split into two variants: lower camelCase and upper camelCase.
Lower camelCase, often just called mixedCase, is common for variable names and JSON properties. Here's an example:
lowerCamelCase
formControl
matAutoComplete
Upper camelCase, which is also referred to as PascalCase, is typically used for naming classes and decorators. For instance:
UpperCamelCase
HeroesComponent
AppModule
@Component
What is kebab-case?
kebab-case uses lowercase words separated by hyphens. This format is also known as spinal case. It's the standard for component selectors and file names. For example:
kebab-case
mat-form-field
hero-detail.component.ts
Discrepancy in Official Documentation
Since Angular 7, the Angular CLI documentation has been hosted on the official angular.io site. Before that, you could find it on the Angular CLI GitHub repository.
Docs Use camelCase
A look at the documentation for the ng new command shows that options are displayed in camelCase.
Notice that the option names are all in camelCase. Take, for instance, the createApplication option. Based on the docs, you'd expect to use the flag like this:
ng new my-app --createApplication=false
CLI Help Output Uses kebab-case
However, the help output from the Angular CLI itself presents a different picture. To see the help for ng new, you can run:
ng new --help
This command produces the following output:
Here, the --create-application flag is listed in kebab-case. So, the CLI itself might lead you to type it this way:
ng new my-app --create-application=false
Two Acceptable Options
So which one is the right way?
ng new my-app --create-application=false
or
ng new my-app --createApplication=false
It turns out, both ways are correct.
The Angular CLI processes commands successfully no matter which casing style you use. I've put this to the test, checking many other options as well to be sure.
This raises an interesting question:
Since when has this been the case?
Checking Back to Angular 6
Angular 7 certainly accepts both camelCase and kebab-case. But does Angular 6?
It's a fair question.
As mentioned, the CLI documentation was only integrated into angular.io starting from Angular 7. For Angular 6, the official guide was the Angular GitHub Wiki, which can still be found here:
https://github.com/angular/angular-cli/wiki
Going back to check that wiki, you can confirm that it also showed options in kebab-case.
To be absolutely thorough, I also installed Angular CLI version 6 and checked its --help output, which was, of course, entirely in kebab-case.
camelCase in Angular CLI 6?
The Angular CLI 6 documentation exclusively used kebab-case, leading us to believe that camelCase options wouldn't work.
But I tried it anyway.
To my surprise, Angular CLI 6 processed them without issue.
After this discovery, my colleague at Angular In Depth, writer Lars Gyrup Brink Nielsen, decided to test it on even an older version, Angular CLI 1.0. And what do you know? It worked there too.
Therefore, not just Angular 7, but Angular CLI 6 and Angular CLI 1 as well have supported both camelCase and kebab-case options.
Conclusion
I admit, this is a minor detail in the grand scheme of things.
Still, for consistency, I'd have preferred to see every piece of documentation use kebab-case, with camelCase support remaining as an unstated feature.
From my side, I plan to use kebab-case going forward, as it matches the output of the Angular CLI's built-in --help command.
If you have a preference for camelCase, that's perfectly fine. It's not something I'll hold against you. We can still be friends and enjoy a kebab together.
