5 Angular CLI Tips You Should Know

5 Angular CLI Tips You Should Know

As Angular developers, we often interact with the command-line interface (CLI) to scaffold components and manage packages. It is very important to master the CLI to make sure your development flow is smooth.

Having developed several Angular applications myself, I have come to realise the 5 tips below.

Shorten commands

The official getting started guide tells you to use the full names of commands, such as:

ng generate component MyComponent

While this is great for beginners, it is also possible to achieve the same output by using the initials of commands.

ng g c MyComponent

You can shorten various commands as shown in examples below:

ng generate module MyModule ====> ng g m MyModule
ng generate pipe MyPipe ====> ng g p MyPipe
ng generate service MyService ====> ng g s MyService

Dry run flag

It is often useful to know what effect executing a certain command will have on your workspace. You can use the CLI flag --dryRun to see the effects of a command without making any changes:

hello-world % ng generate component Home --dryRun

CREATE src/app/home/home.component.css (0 bytes)
CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.spec.ts (614 bytes)
CREATE src/app/home/home.component.ts (261 bytes)
UPDATE src/app/app.module.ts (931 bytes)

NOTE: The "dryRun" flag means no changes were made.

Enable routing and Sass for new projects

The CLI can easily scaffold a new application using the new command. Unless you plan on keeping your newly created project for demonstration purposes, you should enable routing and Sass support.

ng new HelloWorld --routing --style=scss

As you’d expect, this will scaffold a new application called HelloWorld.

Since we used the routing flag, a new file called app-routing.module.ts will appear under src\app. This is for your convenience to start adding routes to your application. It even registers the routing module with AppModule so you can get going right away. It is worth noting this flag also works when generating modules.

The command also creates a styles.scss in your project, instead of the usual style.css. Since we enabled Sass support, all newly generated components will also have a corresponding *.scss file.

Combine commands

You can combine multiple Angular CLI commands, for example:

ng g m feature --route feature --module app.module

This command procudes: 

  • New feature module, which has lazy loading support
  • New feature routing module
  • New feature component
  • Registers the new lazy route in app.module

It is amazing how all of the above can be achieved just by using a single command.

Strict mode (v10)

Angular promotes best practices and consistency since the early days of development. With the adoption of Typescript, we have had compile-time checks that allowed us to prevent issues as early as possible.

With the recent release of Angular v10, we now have optional strict mode in CLI. The strict mode lets us perform more build-time optimisations and deliver faster apps with fewer issues. In order to opt into the strict mode, you need to use the strict flag:

ng new HelloWorld --strict

This command generates a new project with the following settings:

  • Strict mode in TypeScript, as well as other strictness flags recommended by the TypeScript team. Specifically, strictforceConsistentCasingInFileNamesnoImplicitReturnsnoFallthroughCasesInSwitch
  • Turns on strict Angular compiler flags strictTemplates and strictInjectionParameters
  • Reduced bundle size budgets by ~75%
  • Turns on no-any TSLint rule to prevent declarations of type any
  • Marks your application as side-effect free to enable more advanced tree-shaking

So there you have it, these are my favourite Angular CLI tips! What is your favourite CLI feature? Let me know by dropping a comment below.

Umut Esen

Umut is a certified Microsoft Certified Solutions Developer and has an MSc in Computer Science. He is currently working as a senior software developer for Royal London. He is the primary author and the founder of onthecode.

Leave a Reply