Software systems to innovate and grow

Introduction to Angular CLI

By Engineering Team October 30, 2018 10 mins read

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:

  1. Create Angular applications faster, with great consistency. This makes it easy to create a new working application.
  2. 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.
  3. Run Unit and End-to-End (e2e) tests.
  4. Generate bundles for development use and create optimized builds from deployment to production.
  5. 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.

Scaffold CLI command
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.

Production Deployment

Using the ng build command, you are able to compile the application into an output directory. The build artifacts will be placed in the dist/folder including all of the javascript bundles and the CSS resources, such as fonts and images. The bundles will be included as part of a build and will copy over to the dist/ folder.

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:

  1. 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.
  2. AOT Ahead Of Time – The compilation is done at build-time. The templates are pre-compiled into JavaScript before the bundles are created so the browser is responsible only for rendering the app. This is the recommended compilation use for production mode.

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:

Introduction to Angular CLI

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.