Bootstrap first Angular4 application using Angular CLI

Before using angular CLI we must have Node.js 6.9.0 and npm 3.0.0 or higher installed on your system. Check version using below commands on command prompt.

Install Typescript for angular. It is highly recommended for angular. Run below command to install typescript.

    npm install -g typescript@2.2.0

Install Angular CLI

Once typescript is installed, install Angular CLI globally. Here -g is used to install Angular CLI globally on system.

    npm install -g @angular/cli

To verify Angular CLI installation completed successfully, we can run command:

    ng version

This will display output like below

    @angular/cli: 1.2.3
    node: 6.11.1
    os: win32 x64

Create New Angular Application

We can create angular application using ng commands on command prompt. To create new application we have to run ng new command like below

    ng new firstApp

This command will create below files/folders

• New directory firstApp is created
• All source files and directories for Angular application are created based on name specified
• npm dependencies are installed
• TypeScript is configured
• Karma unit test runner is configured
• Protractor end-to-end test framework is configured
• environment files with default settings are created

We will discuss on Karma and Protractor in later articles. Let us see tree structure which is created by above command.

├── README.md
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── karma.conf.js
├── package.json  // reference file
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments    //enviornment setting folder
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html  // starter html file
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css  // application global css file
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

Run Our First Application

To preview our new application in browser, navigate to its directory:

    cd firstApp

and execute command

    ng serve

This will show output like below

    ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
    Hash: 2341600ed72c99da6f2c
    Time: 9814ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.34 kB {3} [initial] [rendered]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.19 MB [initial] [rendered]
    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
    webpack: Compiled successfully.

You can now navigate our favorite browser to http://localhost:4200/ to see application in action:

In background following happens, when we run application:

• Angular CLI loads its configuration from .angular-cli.json
• Angular CLI runs Webpack to build and bundle all JavaScript and CSS code
• Angular CLI starts webpack dev server to preview the result on localhost:4200
• LiveReload support, the process which actively watches source directory for file changes is keep running.
• When a file change is detected, step 2 is repeated and a notification is sent to browser to refresh automatically.

To stop running application press ctrl-c on command prompt.

Summary

To create new application using Angular CLI we have to do following steps

• Check correct version of NPM,Node, Typescript and Angular CLI is installed
• Run ng new {{appname}} command to create new application
• Run ng serve command to run application