Should Angular CLI options be in camel case or in kebab case?
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?!
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.
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 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#
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:
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.
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.