Skip to main content

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.

AngularCLI create new angular 2 application

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

AngularCLI create new application folder

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.

AngularCLI create new route

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 Buy Me A Coffee

12 thoughts to “Angular CLI is here for Angular 2”

  1. Window 7 / 64 bit
    Error on the command prompt
    ‘ng’ is not recognized as an internal or external command,
    operable program or batch file.

  2. how do i add some server side routes.
    Right now the server just serves index.html, what if i need something else for certain routes

  3. +1 for DUNC’s question:
    How to use the Angular CLI generated code with VS2015 IDE?

    I’m interested in adding a SPA page into a Core RC2 project, but to scaffold it using the Angular CLI (eg a Dashboard page written in Angular) .

    Is it possible to Create a new MVC Core RC2 app, and THEN use an external tool (the Angular CLI) to scaffold the SPA page (and its sub-pages) that sit INSIDE the VS2015 project? How would Visual Studio communicate with those Angular pages that were scaffolded with an external tool?

    1. Hi James,

      As of now, there is no way to open Angular CLI project with VS 2015 IDE. And there is no way to integrate Angular CLI project automatically in Core RC 2 Project. I understand your concern as currently configuring Angular 2 with ASP.NET Core project is a pain but that’s how it is as of now. Angular CLI is still in beta phase, you may expect this feature in future.

  4. How does one open the generated project within visual studio 2015? I can do it with VS Code but want it in VS 2015.

    1. Hi DUNC,

      As of now, I don’t think so it is possible to open Angular cli project to open in VS 2015. Only VS Code has option to “Open Folder”. Since it is in beta stage, we can expect the VS 2015 support in future.

  5. Installed Angular-cli but while creating new project using ng new application-name. Getting error as ng: not found. Please help to resolve this issue.

      1. I check issue log comments, they are suggesting to use nvm instead of npm. I also tried to add alias ng= PATH in .profile but my proxy settings are there in .profile. Can you suggest any other alternatives?

        1. Can you please check your NPM version? It should be greater than 4. Also, can you please uninstall npm and then install it again? I know It’s a weird idea but I believe it’s issue with your npm only.

Leave a Reply

Your email address will not be published. Required fields are marked *