Angular CLI: camelCase or kebab-case

Should Angular CLI options be in camel case or in kebab case?

camel or kebab?

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.

Angular 7 CLI documentation on Angular.io with options in camelCase

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:

Angular 7 CLI output with options in kebab-case

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!

Angular CLI 6 documentation with options in 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.