Angular CLI is a powerful tool to scaffold angular applications easily. It includes a set of commands to build, generate, serve and test angular projects.
"The Angular CLI provides us with all the required dependencies. Boilerplates take care of the webpack configuration, unit test configuration, and transpile TypeScript files to JavaScript." Working with Angular CLI - A Hands-on Guide to Angular (educative.io)
To install the Angular CLI, you can follow my guide: How To Install Angular on Windows
Explore the available ng commands by typing ng help in a terminal window:
Take a look at some Angular CLI commands:
ng add: It provides new angular capabilities by setting up external libraries. It downloads all dependencies from the desired library. Two examples are: ng add @angular/material and ng add @angular/pwa.
ng build: It bundles angular code to be compiled in the browser by transpiling TypeScript code into JavaScript code. It also optimises the final output files. The default output path is the dist folder.
ng doc: A handy command for searching keywords from the angular official documentation.
ng e2e - ng test: Commands to run either Integration Tests or Unit Tests.
ng lint: It validates the code quality standards defined in the angular project.
ng new: It creates a new workspace for our new angular application and sets up an initial configuration for routing and styling.
ng serve: It builds and serves the angular code in a local server. It automatically reloads the server when a file is changed.
ng update: It updates angular dependencies by typing the package names. How to update angular/core and angular/cli: ng update @angular/core @angular/cli.
With the ng generate command, it is possible to generate blueprints or artefacts such as components, modules, services, classes, interfaces, enums, pipes and much more:
The generate command offers some configurable options:
My personal favourite is the third option because we can simulate the command results with no changes made, thereby allowing us to validate beforehand:
The -o option is a commonly used option in the ng serve command to open the local web server on the default browser:
Additionally, in testing, we can obtain a code coverage report of unit tests by using the following command: ng test --code-coverage:
This command creates a folder named coverage that contains an index.html file that provides a detailed code coverage report for all angular components.
Benefits
Best practices: It enhances consistency and code quality to build and develop an angular application.
Time-saver: It handles dependencies and complex configurations allowing developers to focus on writing code.
Automation: It performs several tasks like build, serve, deploy, test, lint, etc.
Drawbacks
Command variety: It may take considerable time to learn all the Angular CLI commands, configuration, and options.
Automation: It's also a drawback when we need to manually manage build tools like Webpack.
Check out my video:
留言