The Angular CLI: A Simple Way to Fire up an Angular 2 Project

Follow us on LinkedIn for our latest data and tips!

, ,

The Angular CLI: A Simple Way to Fire up an Angular 2 Project

The Angular CLI is one of the easiest ways to begin a web development project in Angular 2. The CLI automates most of the typical project startup tasks and reduces bugs and delays by doing so. This makes for faster development, better products, and happier clients and users.

Let’s imagine a scenario where this will be useful. It’s Monday morning at 9:30AM. The Widget Company (your client) wants your agency to create a teaser website for their latest app. The client wants a mockup ready by noon and they want it done in Angular. This mockup needs a splash screen displaying their company logo and a brief “coming soon” blurb. Angular is a great tool to spin up pages like this. But the process of setting up all the dependencies and tooling can be a major pain. Let’s consider two different scenarios of how we’d start this project:

Scenario 1 – Manually Generating Everything

You first create a folder on your dev drive (or network share) to house the work for the mockup. You then create the package.json file with its settings and dependencies:


  "name": "TheWidgetCompany",

  "description": "Splash preview of new product for The Widget Company",

  "private": true,
  "scripts": {
    "start": "live-server"
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "^3.0.0",
    "core-js": "^2.4.0",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.37",
    "zone.js": "0.6.21"
  "devDependencies": {
    "live-server": "0.8.2",
    "typescript": "^2.0.0"


Then you have to create a tsconfig.json file and a systemjs.config.js file to handle the commonjs module loading.

  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "experimentalDecorators": true,
    "noImplicitAny": true
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  map: {
    '@angular': 'node_modules/@angular',
    'rxjs'    : 'node_modules/rxjs'
  paths: {
    'node_modules/@angular/*': 'node_modules/@angular/*/bundles'
  meta: {
    '@angular/*': {'format': 'cjs'}
  packages: {
    'app'                              : {main: 'main', defaultExtension: 'ts'},
    'rxjs'                             : {main: 'Rx'},
    '@angular/core'                    : {main: 'core.umd.min.js'},
    '@angular/common'                  : {main: 'common.umd.min.js'},
    '@angular/compiler'                : {main: 'compiler.umd.min.js'},
    '@angular/platform-browser'        : {main: 'platform-browser.umd.min.js'},
    '@angular/platform-browser-dynamic': {main: 'platform-browser-dynamic.umd.min.js'} 

Running npm install in your terminal will install all necessary packages (assuming you’re running in a NodeJS environment). Then, you’ll use client-provided assets to generate a splash screen and wrap the design in a Bootstrap jumbotron class. Here’s what some of your components might look like.

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

    selector: 'app',
    template: `
        <div class="jumbotron">
            <img class="centeredImg" src="img/thewidgetcompany.png">
            <p class="text-center">{{blurb}}<span class="trademark">{{blurbTm}}</span>{{blurb2}}</p>
            <img class="centeredImg" src="img/system_log_out_T.png">
            <p class="text-center">{{product}}<span class="trademark">{{productTm}}</span>{{teaserDate}}</p>
    styles: [`
        .jumbotron {
            background: #FFF;
        .trademark {
            font-size: .83em; 
            vertical-align: super;
        .centeredImg {
            display: block;
            margin-left: auto;
            margin-right: auto;

export class AppComponent {
    name: string;
    blurb: string;
    blurbTm: string;
    blurb2: string;
    product: string;
    productTm: string;
    teaserDate: string;

    constructor() { = 'Angular 2';
        this.blurb = 'A brand new addition to the On The Go';
        this.blurbTm = 'TM';
        this.blurb2 = ' suite of available products is coming soon:';
        this.product = 'Profile Control';
        this.productTm = 'TM';
        this.teaserDate = " - Coming Fall 2017";


import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';

    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]

export class AppModule { }


import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';



<!DOCTYPE html>
        <title>The Widget Company</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="node_modules/typescript/lib/typescript.js"></script>
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="systemjs.config.js"></script>
            System.import('app').catch(function(err){ console.error(err); });

You wrap up finessing CSS to center the text and play with spacing, and finish cranking out a mockup in time to make the business lunch. The clients make their suggestions, and work on the rest of their site begins in earnest. But why did it take so long for the mockup to be done? It sure seems like a lot of work setting this up manually.

  • You created the package.json file manually.
    You typed in dependencies and other settings native to the package.json file. Any mispellings could cause problems at compile-time. Quite frustrating…
  • You “npm install”ed manually.
    If the package file has bad data (missing dependencies, spelling/syntax errors), this will cause trouble. But even if you typed perfectly, you can still have problems. Case in point: while writing this article (and creating the mockup myself), I actually had to delete and reinstall my node_modules folder due to failures while trying to npm install and compile. I didn’t want to spend much time troubleshooting bugs failing the build, so I grabbed a working package.json file and re-ran npm install. (The errors went away.)
  • You manually created application component templates.
    You will always fill in details on website components (unless you are creating a vanilla website, template, or mockup). But components have lots of areas for developer input, such as: import statements, component decorators, any component-specific styles, directive inclusions, and the actual component class itself (its variables and business logic). If you created all these on your own, all these will be places you’ll check for errors when your app doesn’t build (or generates exceptions while running).

Now let’s entertain a much easier development/setup scenario using the Angular CLI.

Scenario 2 – Using the Angular CLI

  • Type npm install -g @angular/cli if you haven’t already begun using CLI
  • Type ng new [name_of_project_folder] to create a project
  • cd into your project directory and type ng serve to start up your project

In 4 commands, you’ve gone from not having a project space to having a running template set up for your website, accessible on a localhost port. (My local build time was 3 minutes, not counting the time it might take to install the CLI client.) You’ll probably be ready for the lunch meeting by 11AM, if not sooner.

What did you not do?

  • You didn’t spend time manually building package.json or other usual supports
  • You didn’t have to manually start the npm install process for dependencies
  • You didn’t have to manually install a testing system as Karma is included
  • You didn’t have to manually create basic Angular 2 components

As an Angular 2 developer, having the structure already set for a project (and being given the basic components to get started) means I can get on with prototyping. I can get started as fast as I can type those commands and wait for the site to spin up. Not only that, but the CLI also provides for tools to generate additional components. If you’re in a real hurry to mock something up and don’t want to think about creating components yourself, try ng generate.

The CLI takes the process of creating a new project and reduces it to an IDE-esque level of simplicity. Detractors may complain that CLI “dumbs down” the prep work required to get a build going, but I would invite them to look at the cost savings involved. Even if only used for mockup projects, the CLI can severely cut down time and costs.