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).
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
$ 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
$ ng --help
You’ll see that you have commands to:
- Do linting:
- Run tests:
- Run end to end tests:
- Serve your app:
- Build your app ready for production:
ng build --prod
- Show the size of your asset files:
- 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.
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! :)
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!
Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Follow @vintharas