Angular 2 CLI – Build Angular 2 apps using Command Line Interface

Angular 2 CLI aka Command Line Interface is developed to get started quickly for building Angular 2 apps, especially when the entire community felt that setting up Angular 2 development environment was cumbersome.

With introduction of Angular CLI, it’s now easier than ever to create, run builds, do E2E (end to end) tests, run apps and deploy Angular 2 application.

In this article, I will build a very basic Angular 2 application exclusively using CLI. So let’s started.

What we will learn here?

  1. Installing Angular 2 CLI using NPM.
  2. Creating an Angular 2 application using command line interface
  3. Examine CLI created project structure.
  4. Serve or Run Angular 2 application.
  5. Create models and services to work with data.

Installing Angular 2 CLI using NPM

Ensure you have latest NPM and Node installed on your machine. After that run this command to install Angular 2 CLI globally.

Creating an Angular 2 application using CLI

We will be creating a simple “OurPlanets” application displaying list of our solar system planets

Run the below command to create new Angular 2 app. “OurPlanets” is application name, the –prefix option tells us that “Planets” will be added as prefix for project files.

angular 2 cli

Running “ng new ” command

  1. CLI command – ng new to create application
  2. List of files created using CLI command
  3. The newly created application is now GIT repository by default.
  4. As the package.json is already created, CLI command does restore of packages. It takes few minutes to restore packages.

Examine CLI created “OurPlanets” project structure in Visual Studio Code

Open Visual Studio code, load this project to check out project structure got created by CLI

Angular 2 cli

OurPlanets project structure

  1. e2e” folder containing test files, configurations for performing end to end testing.
  2. node_modules” folder contains all packages restored as per package.json
  3. src/” folder is the main application development folder containing template HTML files, TS files, components.
  4. main.ts, tsconfig.json, index.html etc” are essential files needed for running application
  5. packages.json” contain essential file which contain reference to all packages needed for running Angular 2 app. See .gitignore file also. Automatically “OurPlanets” application is GIT repo, which we can push it if needed.

Isn’t it amazing just by running “ng new” command of Angular 2 CLI gives us so much stuff to get started.

Serve or run “OurPlanets” Angular 2 apps

Now that we have app with all dependencies, build it and run as shown in figure.

Note: ng build command creates “dist/”, a folder containing compiled, minified (if applied) Angular 2 application.

Directly running ng serve will start webpack-dev-server to run application, this won’t create “dist” folder.

Angular CLI starts running on http://localhost:4200 and listens for any changes to reload automatically

Create Planets model and PlanetService using CLI

As “OurPlanets” application is about solar system planets, it’s time to create model and service to get planets list and its details in form of planet.

Model refers to class structure containing properties just like C#, Java.

Run the following commands to create “planet.model” model class and “planet.service” service.

Note: class generating command lets have suffix with ‘model’, service generating command creates file with ‘service’ suffix.

CLI also generates spec TS files used for unit testing

Open planets.model.ts file & copy below code, its really simple class with four fields.

Open planets.service.ts file to copy below code; it imports ‘planets.model’, getPlanets method which returns list of planets data. Nothing fancy, but still good enough

Loading Planets data on UI

Here we are importing Planets model & PlanetsService so that we can load data

app.component.ts

app.component.html

app.module.ts

We need to provide any services details while loading application in @NgModule providers in app.module.ts

Run “ng serve” command & open localhost:4200 in browser to see running application

angular 2 cli

OurPlanets running on browser

What’s next?

You may also like...

46 Responses

  1. adhi venkatesh says:

    Hi any one can help i am unable to configure for angular2 in visual studio 2013 , i am not finding template ‘ tools->options-project and solutions ” external web tool is not found

  2. adhi venkatesh says:

    i am new to angular2 , how to run the components for second time using ng serve

  3. Dan Grummon says:

    The call to generate planets model does not generate planets.model.ts:

    $ ng generate class shared/planets model
    As a forewarning, we are moving the CLI npm package to “@angular/cli” with the next release,
    which will only support Node 6.9 and greater. This package will be officially deprecated
    shortly after.

    To disable this warning use “ng set –global warnings.packageDeprecation=false”.

    installing class
    create src\app\shared\planets.ts

  4. Sunder says:

    Nice article. We are using one ready-made Angular 2 template. We have written our custom code and it’s working on webpack dev server. But when we create bundle and deploy dist folder it doesn’t work. It gives error of EXCEPTION: Uncaught (in promise):
    Any pointers?

  5. Partha says:

    Hi Mithun, am getting the below error,

    EXCEPTION: Error in :0:0 caused by: The selector “Planets-root” did not match any elements

    help me to resolve it , where do i need to mention the selector name?

  6. Federico A says:

    Its an excelent sample, In app.component.ts i had to split
    import { Planets, PlanetsService } from ‘./shared’; into 2 imports:

    import { PlanetsService } from ‘./shared/planets.service’;
    import { Planets } from ‘./shared/planets.model’;

    Thank you!!!

  7. Bjo Bo says:

    Hi, thank you for your tutorial. I needed to edit the shared/index.ts aswell and added:
    export * from ‘./planets.service’;
    export * from ‘./planets.model’;

    Is it correct, that it is not added automatically?

    Thanks
    Bjo

  8. dance2die says:

    Hi Mithun,

    Is there a way to use Angular CLI with ASP.NET MVC 4 & 5?

  9. Due to changes in the router, route generation has been temporarily disabled. You can find more information about the new router here: http://victorsavkin.com/post/145672529346/angular-router

  10. prithivi raj says:

    Hi Mithun, how to deploy this build in server? we are using GoDaddy Virtual private server.

    • Angular CLI after BUILD produces DIST folder, it’s kind of compiled code which you can host on any private server just like normal HTML website. I hope you dont have any server side code, else this step wont work

      I never tried with GoDaddy, I guess you need to create empty website then place DIST folder there and point to index.html. Let me know how this works out.

  11. Paul Butterfield says:

    Thank you for producing the tutorial, which I have attempted to follow.

    I created the application, OurPlanets and saved it on a pen drive (I:). The following code was generated in the Command Prompt Window (administrator).

    \ Installing packages for tooling via npm
    ├── es6-shim (global)
    ├── angular-protractor (global dev)
    ├── jasmine (global dev)
    └── selenium-webdriver (global dev)

    Installed packages for tooling via npm.

    I then opened the folder: OurPlanets in Visual Studio Code. The layout was identical to the one shown in your diagram : “OurPlanets” project structure in VS Code. There was a number of exception.

    • My structure did not include the folder working files.
    • My structure did include
    o OPEN EDITORS
     INDEX.html src
    Are these differences significant?

    I:\OurPlanets>ng build
    Build failed.
    The Broccoli Plugin: [Funnel] failed with:
    Error: EISDIR: illegal operation on a directory, symlink ‘I:\OurPlanets\src’ ->
    ‘I:\OurPlanets\tmp\funnel-input_base_path-bX1QKKvd.tmp\0’
    at Error (native)
    at Object.fs.symlinkSync (fs.js:897:18)
    at symlinkWindows (I:\OurPlanets\node_modules\angular-cli\node_modules\symli
    nk-or-copy\index.js:101:16)
    at symlinkOrCopySync (I:\OurPlanets\node_modules\angular-cli\node_modules\sy
    mlink-or-copy\index.js:53:5)
    at I:\OurPlanets\node_modules\angular-cli\node_modules\broccoli-plugin\read_
    compat.js:58:9
    at lib$rsvp$$internal$$tryCatch (I:\OurPlanets\node_modules\angular-cli\node
    _modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (I:\OurPlanets\node_modules\angular-cl
    i\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (I:\OurPlanets\node_modules\angular-cli\node_
    modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (I:\OurPlanets\node_modules\angular-cli\node_modules
    \rsvp\dist\rsvp.js:1198:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

    The broccoli plugin was instantiated at:
    at Funnel.Plugin (I:\OurPlanets\node_modules\angular-cli\node_modules\brocco
    li-plugin\index.js:10:31)
    at new Funnel (I:\OurPlanets\node_modules\angular-cli\node_modules\broccoli-
    funnel\index.js:44:10)
    at Angular2App._buildInputTree (I:\OurPlanets\node_modules\angular-cli\lib\b
    roccoli\angular2-app.js:92:7)
    at new Angular2App (I:\OurPlanets\node_modules\angular-cli\lib\broccoli\angu
    lar2-app.js:51:41)
    at module.exports (I:\OurPlanets\angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (I:\OurPlanets\node
    _modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:55:19)
    at Class.module.exports.Task.extend.init (I:\OurPlanets\node_modules\angular
    -cli\node_modules\angular-cli\lib\models\builder.js:89:10)
    at new Class (I:\OurPlanets\node_modules\angular-cli\node_modules\core-objec
    t\core-object.js:18:12)
    at Class.module.exports.Task.extend.run (I:\OurPlanets\node_modules\angular-
    cli\node_modules\angular-cli\lib\tasks\build.js:15:19)
    at I:\OurPlanets\node_modules\angular-cli\node_modules\angular-cli\lib\comma
    nds\build.js:32:24
    at lib$rsvp$$internal$$tryCatch (I:\OurPlanets\node_modules\angular-cli\node
    _modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (I:\OurPlanets\node_modules\angular-cl
    i\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (I:\OurPlanets\node_modules\angular-cli\node_
    modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (I:\OurPlanets\node_modules\angular-cli\node_modules
    \rsvp\dist\rsvp.js:1198:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

    I would apprcaiate it, if you could help me to solve this problem.

    Kind regards

    Paul Butterfield

  12. Amr Ayoub says:

    when i use ng generate route dashboard
    i got this error
    “Due to changes in the router, route generation has been temporarily disabled. Yo
    u can find more information about the new router here: http://victorsavkin.com/p
    ost/145672529346/angular-router

  13. Mathew says:

    “import { Component, OnInit } from ‘@angular/core’;”

    Is it really angular2? Angular 2 import look like this:

    “import {Component, OnInit} from ‘angular2/core’;”

    “npm install” create another files than “ng new ……”

    Is output of ng really angular 2?

  14. Andrew Scott says:

    Hi Mithun

    Nice article 🙂 My windows 10 says “ng is not recognized as an internal or external command” after I installed it following your instructions.Do have any suggestions?

    Thanks

    Andrew

  15. Chris Rivera says:

    seems for the latest build of angular 2, you need to add PlanetService as a provider to the component declaration, in this case in dashboard.component.ts

    @Component({
    moduleId: module.id,
    selector: ‘planets-dashboard’,
    templateUrl: ‘dashboard.component.html’,
    styleUrls: [‘dashboard.component.css’],
    providers: [ PlanetsService]
    })

    otherwise dashboard will not load due to an error.

    • Hi Chris,
      I have added “PlanetService” as provider in our-planets.component.ts, which is bootstrapped component. Doing this it will be available across all components. However you idea works, but its confined only dashboard component. Either way is fine.

  16. James Best says:

    This is fantastic! These steps really clear it up for me. Cheers!

  17. David Vasquez says:

    On dashboard.component.html wouldn’t it be better to place the *ngFor on the “card” div instead of the “ui cards” div? Unless I’m missing something this way you aren’t repeating the “cards” div over and over.

  1. May 11, 2016

    […] is Angular 2 application development using Angular 2 Command Line Interface also, it’s interesting […]

  2. May 12, 2016

    […] Angular 2 CLI – Build Angular 2 apps using command line interface. Angular 2 CLI aka Command Line Interface is developed to get started quickly for building Angular 2 apps, especially when the entire community felt that setting up Angular 2 development environment was cumbersome. With introduction of Angular CLI, it’s now easier than ever to create, run builds, do E2E (end to end) tests, run apps and deploy Angular 2 application. In this article, I will build a very basic Angular 2 application exclusively using CLI. So lets started. What we will learn here? Installing Angular 2 CLI using NPM.Creating an Angular 2 application using command line interfaceExamine CLI created project structure.Serve or Run Angular 2 application.Create models and services to work with data.Create Dashboard page using router Installing Angular 2 CLI using NPM Ensure you have latest NPM and Node installed on your machine. […]

  3. September 28, 2016

    […] Angular 2 CLI – Build Angular 2 apps using command line interface. Angular 2 CLI aka Command Line Interface is developed to get started quickly for building Angular […]

  4. September 30, 2016

    […] We will be adding these Material 2 components into Angular 2 application created using Angular CLI, we will continue from Build Angular 2 apps using CLI […]

  5. November 30, 2017

    […] Angular 2 CLI – Build Angular 2 apps using Command Line. – Building Angular 2 apps using Angular 2 CLI. Command Line Interface tools help create, build, test, do e2e and deploy applications. It uses webpack to build […]

Leave a Reply