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.
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
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
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
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,
- Turns on strict Angular compiler flags
- Reduced bundle size budgets by ~75%
- Turns on
no-anyTSLint rule to prevent declarations of type
- 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.