Create a new Angular 2 application with Angular CLI

Create a new Angular 2 application with Angular CLI

  • 2016-09-08
  • 2497

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.

Angular CLI

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

enter image description here

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 srcfolder 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.

enter link description here

Here if you see, we have our root component already created along withmaint.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.

enter image description here

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

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 generatecommand.

Generate a new component

 ng generate component myhome

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

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.

Suggest

Angular 2 with TypeScript for Beginners: The Pragmatic Guide

The Complete Angular 2 With Typescript Course - Update RC 6

Angular 2 and NodeJS - The Practical Guide to MEAN Stack 2.0

Learn Angular 2 Development By Building 10 Apps

Angular 2 - Superheroic Framework