The commonly known Angular CLI, or just CLI, is the standard command line tool used to create, debug and publish Angular applications. With the newer versions becoming more powerful and versatile than ever, it is easier to master the basics. But don’t take our word for it — let’s start by getting into a more detailed explanation
What is Angular CLI?
The Angular team has created a tool called CLI. It is the command line interface for Angular. This makes it a powerful tool that goes way beyond a simple bundler or generator.
Angular CLI allows you to:
- Create Angular applications faster, with great consistency. This makes it easy to create a new working application.
- Create boilerplate code for angular features such as components, directives, pipes, services, etc. TypeScript features like classes, interfaces, enums are also available. In addition, you can create test files for all of these. Put simply, Angular CLI provides you with boilerplates, saving you time.
- Run Unit and End-to-End (e2e) tests.
- Generate bundles for development use and create optimized builds from deployment to production.
- As part of its official documentation, it comes with the Webpack module bundler pre-configured, so you can enjoy the benefits without the struggle of diving into the configuration.
Project Creation and Directory Structure
Angular CLI already produces a new project with a good suggested default layout, running the ng new command. For example: ng new my_project
The Angular CLI makes it easy to create an application that works right out of the box, following the suggested best practices:
Each time you create a new component, a folder is created to maintain the directory structure and keep your code organized.
In the following table, you’ll see all the available Schematics of the ng generate command or the abbreviation ng g.
|Component||ng generate component new_component|
|Service||ng generate service new_service|
|Module||ng generate module my_module|
|Directive||ng generate directive new_directive|
|Pipe||ng generate pipe new_pipe|
|Guard||ng generate guard new_guard|
|Class||ng generate class new_class|
|Interface||ng generate interface new_interface|
|Enum||ng generate enum new_enum|
The command to generate a new component will automatically update your root module to include it and have it ready to be used in your application.
Running the Project Locally
With the command ng serve, Angular CLI provides a way to easily test your application locally while you’re developing. Once you run it, navigate to http://localhost:4200/ and see your app working.
Another feature that CLI includes is the livereload provided by Webpack. The application will automatically reload if you make any changes to a source file and save it. In other words, the page will be refreshed in the browser without having to restart the server, and you’ll be able to see the changes reflected immediately.
Angular CLI uses bundling and limited tree-shaking for all builds. For example, adding the –prod flag provides the ability to do builds that run limited dead code elimination using UglifyJS. With this option, it removes unwanted white space by minifying files and uglifies files by renaming functions and variable names. The builds made with the –prod flag make use of AOT compilation.
Angular has two kinds of compilations:
- JIT Just-in-Time – The Angular compiler is included in the vendor.bundle.js file and the template compilation occurs in the browser. JIT should be used only for development time, not production.
Lint and Test
Make your code really shine. Execute the official Angular linter and run clang format. The ng lint command will lint your app code using the linter for the TypeScript language called TSLint.
Running unit tests is as easy as running the ng test command. This command compiles the application into an output directory. Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes.
The test framework used by CLI is Jasmine. Run your unit tests or your end-to-end tests with the breeze of a command. That’s right! The Angular CLI prepares your application to be tested with only one command.
To view the code coverage of your tests you’ll need to add the –code-coverage flag. The generated coverage report will be available in the coverage/ directory.
Output report example:
As you can see, Angular CLI is a great tool with simple features which help make developing your Angular application a lot easier. It will help with your deployments at the time of developing, but it will include all of your resources, generating bundles from your source files that eliminates unnecessary code. As a result, you’ll have a lighter application with a noticeably faster load time.
Angular is the perfect framework for the professional development of modern applications. CLI is the right tool to generate Angular applications. It’s truly unbeatable in terms of development speed and execution power.