In this article, we will explore the different commands and features of the Angular CLI.

 for web app development at the moment. Over the years, it has grown into a mature framework, and now offers a host of features to supercharge your dev process. 🚀

A lot of new Angular developers talk about a steep learning curve when learning the framework. This could be why:

If you're new to Angular, you'll have your hands full trying to grasp all these new concepts and the terminology around them. To make things easier when setting up a project and scaffolding new pieces, the Angular team has built 

Angular CLI is the Command Line Interface for creating, building and scaffolding new functionality for Angular applications.

It provides all the commands you need to rapidly spin up new Angular applications - starting from the build process, all the way to unit tests, end to end tests, and even deployment.

Angular CLI allows you to scaffold a full project structure from scratch, with dependencies and build tooling preinstalled and configured. You can use this command to set it up.

When you run this command, the Angular CLI asks you a couple of questions so it can set things up correctly.

Once you choose your preferred options, the following folder structure is created:

This is a pretty standard NPM-based project which uses TypeScript and 

. Since it is a single page application, it only contains one 

 configuration is abstracted away for simplicity, and all the configurable parameters are set in the 

 for end-to-end testing. It comes with a single module pre-created, with an 

 which is the entry point for anyone using the app.

We will learn more about modules, components and other types of files in the upcoming sections.

 is a container for components, services, pipes and any other functionality. Think of it as a way to group your application features or pages. Modules can export functionality that's declared within them, and can also import other modules.

 that's pre-created when you generate the project, but as your application grows, you will find it useful to logically group functionality to facilitate advanced features such as lazy loading.

You can generate Angular modules using the command

Here's what a typical module file looks like:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

 declaration contains the following properties:

If you find yourself repeating or copy-pasting component templates and logic in different places, it might be worth considering a shared components module.

An Angular component is a unit of functionality that comprises of 4 files:

 file included, which will contain tests for your functionality.

You can generate Angular components using the command

 command, these files are generated, and the nearest module is updated to include the new component in its 

 Strive to separate display(dumb) components from container(smart) components -Dumb components won't have dependencies, and will have all the data passed in. Smart components will inject services and will handle making HTTP calls etc. This will give you a lot of reusable components, which will serve you well as your project scales up.

 decorator is considered a provider. It can be injected into a component, service or pipe through its constructor.

You can generate an injectable service using the command

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class PizzaService {
  constructor() {}
}

 decorator here specifies that this class 

 is provided in the root module. This is a more recent way of configuring a provider. Another way is to include it in the 

 were to require functionality from another service, it could be injected through its constructor like so:

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class TestService {
  constructor(private toppingService: ToppingService) {}
}

Services are generally used to provide shared functionality such as making HTTP requests, transforming data etc. Angular includes its own HTTP client which is based on RxJS observables. This is quite different from traditional Promise-based implementations and can be a bit hard to wrap your head around. 

 is a great resource that explains these concepts.

Services are instantiated once for each module they are provided in. So if a service was provided in the root module, it would only be instantiated once for your entire application. 

 to maintain in-memory shared state across your application, such as user auth state, UI preferences etc.

An Angular pipe is a special function that takes a value, applies some transformation and returns the transformed value. 

You can generate a pipe using the command

When a pipe is generated, the nearest module's declarations array is updated to include the new pipe.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "shout"
})
export class ShoutPipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

This pipe can be instantiated in two ways:

Angular CLI abstracts away all the build-related setup and configuration and provides a few commands that perform all these functions.

 command compiles your application as per the configuration specified in 

 which creates a production-ready build of your app. This applies optimisations such as minification, tree shaking and dead code elimination to reduce the overall bundle size

When developing your application locally, the Angular CLI provides a means of spinning up a local web server using the 

 under the hood. It watches for any changes in your source files and automatically reloads your browser tab(s).

Angular CLI projects come with Karma and Jasmine pre-installed and configured. Karma is the test runner, and Jasmine is the testing framework. There are also Angular APIs available for creating test modules and mocking out dependencies. You can run any tests you've written using this command.

 mode, which means they will be re-run whenever the source files change. You can run 

 in case you'd like to do a single run e.g. in your CI environment.

 tooling to enforce code style and detect violations. It provides an opinionated set of rules, which can be overridden if required by modifying the 

 file. You can run this command to detect code style violations in your source code.

This file contains all the configuration for how your Angular workspace is organized, built and served. A workspace can contain multiple projects, and they are all included in the 

 section, where the builders and configuration for each command are defined.

The example file below uses the default builders specified by the CLI. Custom builders can be installed as NPM dependencies and can be specified in place of the default ones. You can also write custom builders as per the guide available 

 article from Angular In Depth is also a great resource for understanding how builders work.

 property, which can be used to specify extensions to Angular CLI functionality.

Schematics are a relatively recent addition to the Angular ecosystem. More information on how they work and how to use them can be found 

In this article, we have learnt about what Angular is, and the reasons why new Angular developers perceive it to have a steep learning curve.

We have looked at the toolchain that Angular CLI provides and the different commands in-depth. During the process, we have also explored most of the important concepts of the Angular framework. 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Getting Started with Angular CLI

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript