UPDATE (5th April 2017): This article has been updated to the latest release of the Angular CLI 1.0.0 and the latest version of Angular 2+ (Angular 4).

I have run a couple of workshops on Angular (2+) and the most number of issues that prevented (or slowed down) participants from enjoying Angular 2 were related to setting up their development environment. I also get questions often in my blog and mailbox about JavaScript and Angular (2+) and there’s a surprising number of them related not to Angular itself but issues with module loading and the dev environment. All of this is because “modern” web development (as it’s often referred to) is not easy.

We have all these awesome new languages and tools that improve our development experience like TypeScript, ES6, SASS, eslint, Karma, etc but they come at a price because the browsers can’t quite understand them or they require additional configuration. So we need that transpilation/automation layer, territory of the so called front-end build pipeline, to do that job for us. And that means that as web developers there’s now an extra skill that we need to learn and master. Indeed if you’ve worked with any sizeable JavaScript project in the past two years chances are that you’ve gone through the non-trivial task of building your own pipeline with grunt, gulp, broccoli or webpack.

Fortunately for us, the Angular (2+) team is on a quest to make the Angular (2+) ecosystem the most awesome possible. That’s why they are working on a tool that will help you create an Angular (2+) app from scratch with all necessary configuration with just three words: ng new my-app.

The Angular CLI. Sounds interesting?

CLI tools are not uncommon. You may have heard of the focus of the Ember community in providing an awesome developer experience and their Ember cli, or you may have experimented with hybrid mobile development with either cordova or ionic, or you may have used yeoman to bootstrap your projects.

The Angular CLI is heavily inspired by all these and aims at bringing that same awesome developer experience to the Angular community.

How To Get Started

To get started with the Angular cli you’ll need to install it via npm:

$ npm install -g @angular/cli

That will make the ng command available in your terminal and now you can start kicking ass.

Create A New Angular App

Using the cli, creating a new Angular project from scratch is as easy as typing:

$ ng new hello-world

As of today April 4th 2017, the ng new command will create a brand new project in Angular 4

This will bootstrap a complete Angular app inside the hello-world folder with all the necessary dependencies and configurations for useful stuff like linting, testing, live reloading, etc.

You can serve your application through an http server using the serve command:

$ cd hello-world
$ ng serve

You can open a browser in the url shown by the cli:

*
 NG Live Development Server is running on http://localhost:4200.
*

And you’ll see your application up and running. If you now go and update something in your src/app/app.component.ts, for instance, you’ll see the changes immediately reflected in your browser. Yey!

And there’s more!

What Do You Get?

In order to find all the capabilities of the Angular cli you can invoke help:

$ ng --help

You’ll see that you have commands to:

• Do linting: ng lint
• Run tests: ng test
• Run end to end tests: ng e2e
• Serve your app: ng serve
• Build your app ready for production: ng build --prod
• Show the size of your asset files: ng asset-sizes
• Get specific command help: ng help <command-name>
• Look at the Angular docs: ng docs <keyword>

And you also have generators!

Use Generators To Uphold Standards

Generators let you quickly scaffold new Angular elements like components, routes, modules, etc. For instance, you can type:

$ ng generate component my-component
// you can also use the shorthand 'g'
// $ ng g component my-component

And get a new component added to your project together with template, styles and a spec:

installing component
  create src/app/my-component/my-component.component.css
  create src/app/my-component/my-component.component.html
  create src/app/my-component/my-component.component.spec.ts
  create src/app/my-component/my-component.component.ts
  create src/app/my-component/index.ts

If you have used yeoman before then this should feel very familiar to you. Generators help maintain the consistency of your project, so not everyone writes components, pipes or whatever in a different way. Uniformity and consistency will help both existing and new developers to work with a given codebase. I feel that this used to be a bigger problem in Angular 1 because ES5 provides a lot of freedom and lacks clear guidance as to how you can structure things but it’s still great to have.

If you forget about all the generators that are available you can get a list by typing:

$ ng help generate

That will show you the help for the generate command together with a list of the available blueprints.

Concluding

And that’s it for this introduction to the Angular CLI. The Angular cli is a tool that is going to bring a new level of developer experience to the Angular community and that’s definitely going to help everyone get started with Angular (2+). It will take care of the crutch of build configuration so you can focus in writing your app. Awesome! :)

You can keep up to date about the Angular CLI by following their website and GitHub repository.

In the near future I’ll write a follow up with more practical and detailed information on how to work with the angular cli within a real project and about the cli extensibility story. In the meantime, if you want to learn more about Angular (2+) then take a look at this series.

Have a nice week ahead!