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 2 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 2 CLI is heavily inspired by all these and aims at bringing that same awesome developer experience to the Angular 2 community.
Note that the Angular 2 cli is still in beta and being heavily developed right now so use it at your own peril :). Personally, I think that even in beta, it adds a lot of value and I will definitely use it myself for my new Angular 2 projects.
How To Get Started
To get started with the Angular 2 cli you’ll need to install it via npm:
The Angular 2 CLI is being migrated from broccoli/system.js to webpack. While normally you would intall it via
npm install angular-cliif you do so you’ll get a version of the CLI that uses Angular 2 RC4. To get the latest version of the cli that uses Angular 2 RC5 you’ll need to install the
[email protected]version as shown above
That will make the
ng command available in your terminal and now you can start kicking ass.
Create A New Angular 2 App
Using the cli, creating a new Angular 2 project from scratch is as easy as typing:
This will bootstrap a complete Angular 2 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
You can open a browser in the url shown by the cli:
1 2 3
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 2 cli you can invoke
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 2 docs:
ng docs <keyword>
And you also have generators!
Use Generators To Uphold Standards
Generators let you quickly scaffold new Angular 2 elements like components, routes, modules, etc. For instance, you can type:
1 2 3
And get a new component added to your project together with template, styles and a spec:
1 2 3 4 5 6
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:
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 2 CLI. The Angular 2 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!