Angular CLI is here for Angular 2

Setting up Angular 2 in your application is quite time-consuming compare to AngularJS 1. For setting up Angular 1.x, all you need to do is to just add the reference of library but with Angular 2, it requires some more work due to dependency on Grunt or Gulp for build process, TypeScript and it’s compiler. And setting this with Visual Studio 2015 is even more time-consuming. Angular Team is aware of this and they came up with a solution and introduced a new command line tool (cli) for Angular 2. Yes, Angular CLI is here for Angular 2 applications.

CLI tools are becoming very useful and handy option to allow users to do all the stuff. Node.js, bower, ruby on rails and many other are already having it. And earlier ASP.NET team also introduced dotnet cli to create ASP.NET application. So why not for Angular 2? It’s thoughtful and brilliant idea. At the time of writing this article, Angular CLI is in beta stage.

Angular CLI capabilities

Angular CLI is very powerful and comes with lots of capabilities. You can create new Angular 2 application, build it, compile it, test it against unit test case, run it in your browser with live reload, deploy it in production. Phew!!! Start to end everything… In fact, you can also generate new components, routes, services and pipes for your application.

How to install and do magic with Angular CLI?

To use Angular Cli, you need to have Node 4 or greater installed on your system. Let’s first install Angular Cli on system. Go to npm and execute following command to install it globally.

npm install angular-cli -g

It will take some time for installation to finish. Now, let’s create a new project. Before creating new application just run following command to fix npm permission related errors.

npm cache clean

Syntax for creating new application is,

ng new application-name

So let’s create a sample application.

ng new AngularCLIDemoApp

Once you run this command, you should following screen where node.js is downloading the packages and installing it.

And if you visit the folder, you should see following structure. “src” folder will be having your typescript files and components.

Now without doing anything, let’s run this application. So select the directory and run following command.

ng serve

And you will get a URL on command prompt. Open the URL in browser and you should see your Angular 2 application running in browser. Cool.. Isn’t it.. Following are the other commands.

To build application,

ng build

To run all your test cases,

ng test

As mentioned earlier, you can also create new classes, components, directives, services and pipes to your application via Angular CLI. You need to use ng generate or ng g command.

ng generate class Demo 
ng g component demo-component
ng g service demo-service
ng g directive demo-directive
ng g pipe demo-pipe
ng g route test

You can also create route via Angular CLI.

ng g route demo

This will create a folder named “test” and also create test component, related style sheets and HTML file. But if you don’t wish to have separate stylesheet and html file, and want to use inline html template and style then run following command.

ng g route demo --inline-template --inline-style

Below image shows the difference between two commands.

And below is the code for newly generated component.

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-demo',
  template: `
    <p>
      demo Works!
    </p>
  `,
  styles: []
})
export class DemoComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

Notice that html template and styles are part of class component metadata.

You can also lint and format your code.

ng lint
ng format

Summary

At the time of writing this post, Angular CLI is in beta stage so you may encounter some errors while working with this. But it’s a great tool to configure and start Angular 2 applications. The CLI tool is capable of doing all things from creating the application and deploying the application.

Thank you for reading and I hope it helped you. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then