Introduction to Angular CLI

Introduction

In this post we will get familiar Angular CLI. We will go through some examples and see what kind of things we can do with it and how it can make our life easier and save us some time.

The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

As you might have heard, Angular 2/4 is now just Angular. You can read more about it on Angular’s official blog – link here.

Less than month ago Angular 4 was released. Along with it we got a first major release for Angular CLI – v1.0.0 was released. Hence, I think this is the perfect time to try out the CLI if you haven’t done so yet.

 

Installing the CLI

First things first. We gotta install the Angular CLI npm package globally. That means you need to have Node and npm installed on your machine.

If you used angular-cli before and it was version beta.28 or less you will first need to uninstall angular-cli package. Notice the old package doesn’t have @ in front of it. Due to package rename from angular-cli to @angular/cli we gotta uninstall old cli globally:

npm uninstall -g angular-cli

If you want to remove it from your project as well:

npm uninstall --save-dev angular-cli

You should also clear the npm cache:

npm cache clean

Now we can finally install new CLI:

npm install -g @angular/cli@latest

 

Creating new project with CLI

We can start a new project with ng new command:

ng new angular-cli-playground

After CLI finishes creating project and installing node modules we get a basic bare bones working angular app. If we look at the generated code we can see we have only one component. Our application and code related to our components, services, directives etc. is located in src folder.

CLI initially creates only App component which represents starting point or root component. All other component will be children of this component.

App component has 4 files:

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts

All files are named according to official style guide. If we look at the Angular’s style guide we can see that they recommend using dashes to separate words for the descriptive file name. Furthermore, they recommend using dots to separate the descriptive file name from the type (component, service, directive).

Other content in root folder includes folders for end to end tests, node_modules for installed npm packages. Furthermore, angular-cli generates configuration for editor config, gitignore, karma, npm, protractor, tslint and configuration for angular-cli as well.

 

Serving the content

We can start the app by running ng serve command or ng serve -o command. The argument -o is shorthand for –open which makes angular-cli open the browser for us.

ng serve -o

We can also use a shorthand for ng serve

ng s -o

 

Generating angular parts aka blueprints

If we were to create a new component and execute the command in root folder:

ng g c about-us

we would see a new folder inside of src/app folder. CLI created about-us folder and 4 files inside of it. Also, CLI adds AboutUsComponent to declarations array inside of of our AppModule.

If we navigate to src/app folder and execute

ng g m contact (shorthand for ng generate module contact)

we should see a new folder contact and a contact.module.ts file inside of it.

If we would to navigate inside of contact folder and generate a new component inside of it we would get 4 new files for component. However, CLI would then update contact.module.ts file and add ContactComponent class to its declarations array.

 

Other relevant CLI commands

• new – creates a new angular application
• serve – builds the application and starts a web server. Another thing ng serve does is that it rebuilds the application and reloads the page in browser if it detects any changes in our code
• generate – generate one of angular blocks ( component, service, directive, module, class, service, etc.. )
• lint – uses tslint to check your code
• test – builds the application and runs unit tests
• build – builds the application into an output directory. We can use it to build the app using Ahead of time compilation

 

There are also some other ng CLI commands that you can use. You can see the full list by executing ng --help command.

With any of the mentioned commands we can use –help or -h attribute to see what they do and what arguments can we pass to the command.

ng lint -h

 

Summary

Angular CLI is a command line interface that we can use to create and manage angular projects. It currently uses webpack behind the scenes so you do not have to hassle with modules, bundling, configs and all that stuff that you might want to avoid when setting up new project.

Once we get the grasp of basic concepts and get familiar with the commands using angular-cli can really pay off. We can make a new project with a simple command. We can add components, directives, services to existing modules without any additional interaction. CLI does all the bothersome work for us.

---

Also published on Medium.