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.
[toc]
Shorten commands
The official getting started guide tells you to use the full names of commands, such as:
ng generate component MyComponentCode language: Bash (bash)While this is great for beginners, it is also possible to achieve the same output by using the initials of commands.
ng g c MyComponentCode language: Bash (bash)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 MyServiceCode language: Bash (bash)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.Code language: Bash (bash)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=scssCode language: Bash (bash)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.moduleCode language: Bash (bash)This command generates a new feature module with routing support. It also registers the feature module as a lazy-loaded module 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 --strictCode language: Bash (bash)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,
strict,forceConsistentCasingInFileNames,noImplicitReturns,noFallthroughCasesInSwitch - Turns on strict Angular compiler flags
strictTemplatesandstrictInjectionParameters - Reduced bundle size budgets by ~75%
- Turns on
no-anyTSLint rule to prevent declarations of typeany - 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.
