BT

Angular CLI Helps Spin Up Angular 2 Projects and Components

| by David Iffland Follow 4 Followers on May 14, 2016. Estimated reading time: 1 minute |

In a session at ng-conf 2016, Mike Brocchi gave developers a better look at the Angular CLI (Command Line Interface) tool and it's capabilities. He said that, among developers he's talked to, 26% of them said that the Angular 2 environment setup was a barrier to entry while 22% said it was too complicated. The CLI was made to ease this pain.

To reduce the time it takes to get a project started, Angular CLI has a number of features to "Get started fast":

  • ng new project-name - Create a new project, sets default configuration
  • ng build - Build/compile the app
  • ng test - Run unit tests.
  • ng e2e - Run end-to-end tests
  • ng serve - Spin up a small web server and host the app
  • ng deploy - Out of the box, deploy to GitHub pages or Firebase

All of the configuration needed by these steps is done by the tool.

Beyond setting up a new app, the tool also lets developers run commands to build up pieces of an app such as Components and Routes.

  • ng generate component my-comp - Generates a new Component, along with its test spec and its HTML/CSS
  • ng generate directive my-directive - Generates a new Directive
  • ng generate pipe my-pipe - Generates a new Pipe
  • ng generate service my-service - Generates a new Service
  • ng generate route my-route - Generates a new Route
  • ng generate class my-class - Creates a simple model class

For each of these generation commands, the files are placed in the right location based on the official Angular style guide.

Unfortunately, the tool is made for Angular 2, not for 1.X. Now in Beta, the team behind Angular CLI hopes to add offline template compilation, lazy loading routes, and extensibility.

The idea is not novel. In the Angular world, the Platypi framework used a CLI tool called PlatypusCLI to create app fragments such as models and services. The non-Angular project Ember has its own Ember CLI that assists developers with tasks such as running tests and compiling assets.

The full video of Brocchi's session is available on YouTube.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

We are looking forward to when it will appear in Angular for Dart. by Andrew Mezoni

Great news!
We are looking forward to when it will appear in Angular for Dart.
Dart community will be very happy about this.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss
BT