Tag:

angular2+

    Bootstrap first Angular4 application using Angular CLI

    The Angular CLI is a command line interface tool that automate development tasks. It will help in

    • Create New angular application
    • Add features to existing application
    • Run development server with LiveReload support to preview your application during development
    • Run unit test cases
    • Build your application for deployment to production
    Prerequisites for 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 [email protected]
    

    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
    May 2, 2018 0 comment
    0 Facebook Twitter Google + Pinterest