Using Angular CLI for Angular 2 Projects

May 29, 2016
by Rahil Shaikh

Command Line Interface for Angular 2 Projects! Yes, you heard it right. Keep reading, believe me, Angular CLI will make your life with Angular 2 much easier.

Angular CLI was introduced to us at ng-conf2016 by Mike Brocchi (@Brocco). In his talk he told us that he held a poll in March 2016 to find out the greatest barrier to getting started with Angular 2. Here are the results.

Angular2 poll

Angular2 poll

As you see around 48% percent of the users find the Angular 2 setup and configuration complicated. If you have already followed the Angular 2 quickstart setup you already know the pain. Much of the setup includes.

  1. Creating standard project structure
  2. Creating component
  3. Creating main.ts, and bootstraping the application
  4. Configuring typings and TypeScript
  5. Adding various scripts
  6. Configuring System.js

With Angular CLI all of it can be done with just a single command.

ng new ciphertrick-app

Pretty cool, isn’t it? But before we get started we first need to install Angular CLI.

Installing Angular CLI

Angular CLI is available as an npm package. You will need to have Node and npm installed on your machine.

npm install -g angular-cli

Remember to install it globally.

Creating a new Angular 2 App

To create a new Angular 2 application, you just need to run.

ng new ciphertrick-app

ng new

ng new

This command will start a new Angular 2 application with name ciphertrick-app. This application would already be working and follows all the best practices from the official Angular 2 style guide. It also creates unit testing and e2e testing scripts. Additionally it also installs the required npm dependencies and also saves them to package.json. In short, it does everything required to start a new Angular 2 application.
The src folder is where we will be working and most of our angular code would be under src/app. Let us have a closer look at that folder.

root compnent

root compnent

Here if you see, we have our root component already created along with maint.ts, index.html and other configuration files.

Serve the application

Earlier to run our Angular 2 application in our browser we had to setup some server like lite-server or some other node server. Not required now, the CLI does this for us.

ng serve

This will run our app on http://localhost:4200/. It also sets up livereload for us. You can navigate into the new app directory which we created earlier and run the above command.

ng serve

ng serve

Note: You may require to run your cmd or git bash tool as administrator in Windows or use sudo if you are using Linux.

Unit test the application

As we saw earlier ng new already writes sample tests for our application. To unit test, the application simply run the below command.

ng test

Note – When we ran the above command on a new application (on windows machine), we ran into some errors.

EMFILE Error

EMFILE Error

A quick fix we figured out, for now, was to disable the watch option for ng test.

ng test – -watch false

End to End test

Along with unit tests, you can also run e2e tests with protractor.

ng e2e

Generate parts of your application

An Angular 2 application comprises of various parts, viz. Components, Directives, Services, Routes and Pipes. Angular CLI makes generating these parts easier with the ng generate command.

Generate a new component

ng generate component myhome

myhome.component

myhome.component

Did you notice above? You only need to pass in the component name and Angular CLI will follow the naming conventions from the official style guide. It will create a folder with the name of the component and place it under the app directory.

  • Component Name: myhome
  • Folder Name: myhome
  • File Names: myhome.component.[ts|css|html|spec.ts]
  • Class Name: MyhomeComponent
  • Selector: app-myhome

Generate a new route

ng generate route details

details route

details route

The above screenshot looks quite similar to the one where we generated a new component. The only difference here is the route installation. Well, we will explain that below.

By default Angular CLI configures the route to be loaded lazily, meaning it will be loaded into the browser on demand and not upfront. The folders as a convention for lazy route are appended with as ‘+’ sign.
To skip the lazy loading, generate the new route with the lazy flag turned off, --lazy false.

The folder structure remains same as a component since a route is also a component. When you generate a new route along with creating a component, Angular CLI also modifies the root component file to configure the route. To spot the difference we need to open up our main component file (i.e: ciphertrick-app.component.ts) and have a look. ROUTER_DIRECTIVES and ROUTER_PROVIDERS would be imported and injected into out top level component and our details route would be added as a path into @Routes. See below.

ciphertrick-app.component.ts
import { Component } from [email protected]/core';
import { DetailsComponent } from './+details'; //Imports the new route-component
import { Routes , ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from [email protected]/router'; //Imprting router directive and providers

@Component({
  moduleId: module.id,
  selector: 'ciphertrick-app-app',
  templateUrl: 'ciphertrick-app.component.html',
  styleUrls: ['ciphertrick-app.component.css'],
  directives: [ROUTER_DIRECTIVES], //Injecting
  providers: [ROUTER_PROVIDERS]  //Injecting
})
@Routes([
  {path: '/details', component: DetailsComponent} //Adding the route
])
export class CiphertrickAppAppComponent {
  title = 'ciphertrick-app works!';
}

Other commands

  • ng build: Creates a build and stores it in the dist/ directory.
  • ng github-pages:deploy: Creates a github repo and publishes your app.
  • ng lint: Lints the app code

Conclusion

The Angular team is putting a lot behind Angular 2. After the demos and announcements at ng-conf2016, the backing behind Angular 2 is even more. Although you can never say for sure, we think that Angular 2 is going to be the next big thing. With the introduction of Angular CLI and official style guide, getting started and developing apps with Angular 2 is easier than before. If you haven’t yet started playing around with Angular 2, now is the right time to do so. This tutorial introduced you to some of the things Angular CLI can do. But there is more to it. You can read on and explore more on the official Angular CLI Github page.

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

9 comments

  1. |

    seems to be very easy to use..i will try very soon. Anyway, thank you for the updates.

  2. |

    Hi @Rahil Shaikh, I am facing issue angular-cli in windows like when run the command took lot of time to complete everything. Any idea or give suggestions to speed up project in windows

    • |

      ng-serve is very slow.

    • |

      Yes it’s quite slow, Especially ng new. And its worse if you have a slow internet connection. One thing you could do is run your commandline tool as administrator.

  3. Nitin
    |

    ‘ng generate route details’ is not supported now. How can we implement it with newer approach ?

    • |

      Yes, they have removed support fo the time being. Until it comes back we can generate a component using the angular-cli and hook route manually.

Leave a Comment