Angular CLI: camelCase or kebab-case
Should Angular CLI options be in camel case or in kebab case?
AngularInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev
Angular CLI supports options for commands. For example:ng build --prod
But, for these options should we use camelCase or kebab-case? Well, it turns out that the Angular CLI documentation is rather ambiguous about how you should write these command line options. In this article we will try to sort out this inconsistency and also have a little fun while we are at it.
Because hey! How often do you get a chance to read an article with a picture of both kebabs and a camel?!
Spoiler Alert:
If you don’t want to bother reading this rather short article: the bottom line is that Angular CLI recognizes the options written in either case.
Camel Case Versus Kebab Case
Just for fun, let’s take a quick survey of the differences between camel case and kebab case and where they are typically used in Angular.
camelCase
In camel case words are not separated and each one starts with a capital letter. We can further differentiate between lower camel case and upper camel case.
Lower camel case, sometimes known as mixedCase, is typically used for things like variables and the names of elements in JSON. For example:
lowerCamelCase
formControl
matAutoComplete
We use upper camel case, also known as PascalCase, for things like the names of classes and decorators. For example:
UpperCamelCase
HeroesComponent
AppModule
@Component
kebab-case
Kebab case uses lower case words separated by hyphens (or dashes if you like). Kebab case is also known as spinal case. We use kebab case for component selectors and also for file names. For example:
kebab-case
mat-form-field
hero-detail.component.ts
Angular CLI Options
Starting from Angular 7 the Angular CLI Documentation is an official part of the angular.io website. Prior to that, it was on the Angular CLI GitHub repo.
Angular.io uses camelCase
Here is a screen shot of the documentation for the Angular CLI command ng new.
You will notice the names of the options are in camelCase. For example, take a look at my personal favorite option: createApplication. According to the documentation on angular.io we would use it like this:
ng new my-app --createApplication=false
Angular CLI output uses kebab-case
However, if we look at the Angular CLI command line help, we see something different. To see the help output for the ng new
command, we can use:
ng new --help
When we do this, we get the following:
Here we see that the --create-application
flag is in kebab-case. So, according to Angular CLI, we should actually type it like this:
ng new my-app --create-application=false
Same Thing Only Different
So which one is correct?
ng new my-app --create-application=false
or
ng new my-app --createApplication=false
Well, it turns out: BOTH.
Angular CLI works fine with either one. Yes, I tested them. And, I also verified some of the other options just to make sure. Because that’s the kind of guy I am.
So, this raises the question:
When did this happen?
What About Angular 6?
OK fine, Angular 7 accepts both camel and kebab case options. But, what about Angular 6?
I’m glad you asked.
Remember, the Angular CLI documentation wasn’t part of angular.io until Angular 7. Angular CLI 6 was documented in the Angular GitHub Wiki which was, and still is, here:
https://github.com/angular/angular-cli/wiki
So, I went back and took a look at it, and yep, you guessed it: kebab-case!
Oh, and just to be sure, I actually went back and installed Angular CLI version 6. I checked the output from --help
and, of course, it was all kebab-case.
Angular CLI 6 and camelCase
Angular CLI 6 makes no mention of camel case. So, I supposed that it wouldn’t support it.
I tried it.
Surprise! It actually worked.
Furthermore, after reading this, my fellow Angular In Depth writer Lars Gyrup Brink Nielsen also went back and even tested it on Angular CLI 1.0. And yep. The CLI even supported camelCase way back then.
Hence, not only does Angular CLI 7 support both camelCase and kebab-case, but so do Angular CLI 6 and Angular CLI 1.
So What?
OK, I admit it. This probably doesn’t matter all that much.
But, if it was me, I would have consistently documented the options everywhere in kebab-case. And, I would have just left the fact that camelCase also works, as a little undocumented feature.
For my part, in the future I am going to try to stick to kebab-case because that is what the Angular CLI --help
output uses.
If you prefer camelCase, feel free to use it. I won’t judge you. And, we can still share a kebab.