What is Angular CLI ?

The Angular team had announced about Angular CLI tool that makes creating and scaffolding Angular 2 applications incredibly easy in the NG-Conference. Angular CLI is a command-line interface for you to work with Angular and also to automate your development workflow. To provide you with the superficial features of the Angular CLI makes it easier to work with already created applications right out of the box.

Overview of Angular CLI

Angular CLI allows you to do the following:

• You can create a new Angular application (using command ng new)
• You can run a development server to preview your application during development
• To build your application for deployment to an environment of your choice
• To add additional features to your Angular applications (using command ng generate)
• To run your Angular application’s unit tests (using command ng serve)
• To run your Angular application’s end-to-end tests

With these basic features of Angular CLI available to use, you should be looking forward to starting with the setup process. Let’s delay no further and get deep-diving into the setup process.

Installing the Angular CLI:

The pre-requisite for us to have before we can use Angular CLI is Node.js (6.9.0) and npm (3.0.0 or higher) installed on your system. You can follow the Official documentation available here and download the latest version of Node.js for your OS and follow the given instructions. If you already have the pre-requisites already available on your system, then it is the right time to check the versions available using the following commands.

    $ node –v # (displays the Node.js version installed)

    $ npm –v # (displays the npm version installed)

With the pre-requisites handled, the next step is to have ‘TypeScript’ installed on your system. It is not at all mandatory to have TypeScript installed along with Node.js, npm – but as a recommendation from the Angular team, it is 100% better to have this on your system. The following command should do the trick if the pre-requisites are handled correctly.

    $ npm install –g typescript@2.2.0

With the above pre-requisites and the recommendations handled, now we are at the final step of installing Angular CLI on our system. The following command helps us install the Angular CLI tool on our system:

    $ npm install –g @angular/cli

The command above installs, ng command as a global one, which can be verified as shown in the next step below.

    $ ng version

    @angular/cli: 1.2.1

    node: 6.9.0

    os: darwin x64

With this step done successfully, you are now ready to create new applications. The next section describes the process of creating newer Angular applications.

[ Related Article: Angular vs JQuery - Comparison ]

Creating a new Angular Application:

Creating a new application can be done in two ways, using either of the following commands (using Angular CLI):

1. ng init – This command creates a new Angular application in the present folder.

2. ng new – This command creates a new folder and then under the new folder if we run ng init it creates a new Angular application.

Putting the commands above to use, let’s create a new application called ‘my-angular-application’.

    $ ng new my-angular-application

The command above does the following in the background and generates the application skeleton for us to develop it further. Let’s strip the above command to bare bones and try to understand each step individually.

1. Since we’ve used the command ng new, it will create a new folder called my-angular-application.
2. Source files and folders are created based on the application name that you choose, hence it is very important for every one of us to follow the official Angular style guide.
3. npm dependencies are all installed if it is the first application that you are creating using the command mentioned above.
4. TypeScript will be configured
5. Karma unit test runner will be configured
6. Protector end-to-end test framework will also be configured
7. All the necessary environment files are created with the default settings

[ Related Article: AngularJS Interview Questions for Freshers ]

After running the command above, this is how your folder structure would look like:

//end-to-end tests are created under this

|__e2e/

   |__app.e2e-spec.ts

   |__app.po.ts

   |__tsconfig.e2e.json

//npm dependencies are fetched here

|__node_modules/

//built applications will reside here, obviously this won’t be shown until you build your application at least once.

    |__dist/

//actual development work would be here, and these are the files that we will be going to touch more frequently.

    |__src/

        |__app/

            |__app.component.css|html|spec.ts|ts

            |__app.module.ts

        |__assets/

        |__environments/

            |__environment.prod.ts|ts

        |__favicon.ico

        |__index.html

        |__main.ts

        |__polyfills.ts

        |__styles.css

        |__test.ts

        |__tsconfig.app.json

        |__tsconfig.spec.json

        |__typings.d.ts

//Overall configuration will be present here.

    |__.angular-cli.json    //This is the main configuration file

    |__.editorconfig

    |__.gitignore

    |__karma-conf.js

    |__package.json

    |__protractor-conf.js

    |__README.md

    |__tsconfig.json

    |__tslint.json

It is very important to take note of the folder structure that gets generated and where each of the files is located (for the first time at least) because this is how Angular CLI generates all of these following the Angular style guide as discussed above. There’s always a need to learn about the structure and style guide to incorporate these things into your development as well.

Here’s the default package.json that gets created along with the project by using the command above.

{

   "name": "my-angular-application",

   "version": "0.0.0",

   "license": "MIT",

   "scripts": {

         "ng": "ng",

         "start": "ng serve",

         "build": "ng build",

         "test": "ng test",

         "lint": "ng lint",

         "e2e": "ng e2e"

     },

 "private": true,

 "dependencies": {

       "@angular/animations": "^4.0.0",

       "@angular/common": "^4.0.0",

       "@angular/compiler": "^4.0.0",

       "@angular/core": "^4.0.0",

       "@angular/forms": "^4.0.0",

       "@angular/http": "^4.0.0",

       "@angular/platform-browser": "^4.0.0",

       "@angular/platform-browser-dynamic": "^4.0.0",

       "@angular/router": "^4.0.0",

       "core-js": "^2.4.1",

       "rxjs": "^5.1.0",

       "zone.js": "^0.8.4"

   },

    "devDependencies": {

       "@angular/cli": "1.2.1",

       "@angular/compiler-cli": "^4.0.0",

       "@angular/language-service": "^4.0.0",

       "@types/jasmine": "~2.5.53",

       "@types/jasminewd2": "~2.0.2",

       "@types/node": "~6.0.60",

       "codelyzer": "~3.0.1",

       "jasmine-core": "~2.6.2",

       "jasmine-spec-reporter": "~4.1.0",

       "karma": "~1.7.0",

       "karma-chrome-launcher": "~2.1.1",

       "karma-cli": "~1.0.1",

       "karma-coverage-istanbul-reporter": "^1.2.1",

       "karma-jasmine": "~1.1.0",

       "karma-jasmine-html-reporter": "^0.2.2",

       "protractor": "~5.1.2",

       "ts-node": "~3.0.4",

       "tslint": "~5.3.2",

       "typescript": "~2.3.3"

   }

}

If you run the help command, you will be able to see all the available options of your locally installed Angular CLI tool. You can run the following command to check the available options:

    $ ng generate –help

Options are shown below and by default, every other option is false unless specifically mentioned to be true:

• --dry-run: boolean (performs dry-run so no changes are made to the file-system of the application created)
• --verbose: boolean
• --link-cli: boolean (links @angular/cli package automatically)
• --skip-install: boolean (skips npm install)
• --skip-git: boolean (skips initializing a GIT repository)
• --skip-tests: boolean (skips creating tests for your application)
• --skip-commit: boolean (skips committing the first commit to git)
• --directory: string (by default it is the same as your application name)
• --source-dir: string (by default ‘src’, name of the source directory)
• --style: string, default ‘css’, the style language to use ('css', 'less' or 'scss')
• --prefix: string, default 'app', the prefix to use when generating new components
• --mobile: boolean, generate a Progressive Web App application (see the section on upcoming features)
• --routing: boolean, add a module with routing information and import it in the main app module
• --inline-style: boolean, use inline styles when generating the new application
• --inline-template: boolean, use inline templates when generating the new application

Running your Newly Created Angular Application:

To preview the newly created angular application, traverse to the directory and run the following commands. To start the built-in development server on port 4200:

    $ cd my-angular-application

    $ ng serve

** NG Live Development Server is running on https://localhost:4200 **

Hash: 09fb2ad840c1472e5885

Time: 6230ms

chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]

chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]

chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]

chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]

chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

webpack: Compiled successfully.

Navigate to your browser and key in the following to see whether your application is in action.

So what do you think has happened right now, let’s see the sequence of steps:

• Angular CLI tool loads its own configuration from the file .angular-cli.json

• Angular CLI tool runs the Webpack to build all the required Javascript and CSS modules

• Angular CLI tool starts the Webpack development server to show us the preview on localhost:4200, just as the screenshot shown above.

• Note that the ng server command doesn’t exit and return to your terminal as of the above step. For this to return back to the terminal, you need to press ctrl + c.

You can do much more than just creating newer applications using the Angular CLI tool, you can add more features into the created applications as well using the ng generate command. This can be done just the same way as we have done to create a new Angular application. You can add different types of documents to your application using any or all of the commands mentioned below.

• ng g cl my-angular-application-new-class  (This command adds a new class to our application)

• ng g c my-angular-application-new-component (This command adds a new component to our application)

• ng g d my-angular-application-new-directive (This command adds a new directive to our application)

• ng g e my-angular-application-new-enum (This command adds a new enum to our application)

• ng g m my-angular-application-new-module (This command adds a new module to our application)

• ng g p my-angular-application-new-pipe (This command adds a new pipe to our application)

• ng g s my-angular-application-new-service (This command adds a new service to our application)

Let’s take an example of adding a new class to our ‘my-angular-application’ application:

$ ng generate class my-user-profile

 Installing component create src/app/my-user-profile.ts

Angular CLI will automatically adjust the casing of the class file name and class name for us so that the following commands also result in generating the same class file.

$ ng generate class My-User-Profile

$ ng generate class myUser-Profile

$ ng generate class myuserProfile

In the background, a file src/app/my-user-profile.ts will be created that exports a class with the name MyUserProfile.

Let’s now add a new module, shall we?

To add a new module to your application, we can refer to the shortcut commands provided as above or use the following command to generate a new module named ‘ApplicationModule’.

$ ng generate module administrator

Installing module create src/app/administrator/administrator.module.ts

In the background, a folder structure src/app/administrator will be created (if not created all ready). An AdministratorModule module is created inside src/app/administrator/administrator.module.ts.

Now if you want to import your newly created module into any of your existing modules, you can specify it as an import in the following fashion:

   import { AdministratorModule } from ‘./administrator/administrator.module’

    @NgModule({

        imports: [AdministratorModule]

    })

    export class ApplicationModule { }

By the look of it, you might think that Angular CLI is going to generate code blindly which is not the case actually. Angular CLI uses static analysis to understand the semantics of your project and generates the new feature in the correct module (depending on where you are running your commands). Angular CLI tool finds out the closest module from the whole module tree of your application and then integrates the newly created feature into the module tree in that module.

Running your Unit Tests:

Angular CLI automatically configures the Karma test runner for you when the application is created initially. Whenever you are adding any new feature into your application, consider adding –spec option to notify the Angular CLI tool to create a corresponding .spec.ts file for that new feature with a sample unit test. As you would’ve already observed, the spec files are also created in the same directory of the corresponding new feature in the src directory.

To run all unit tests under your application, run the following command:

$ ng test

[karma]: No captured browser, open https://localhost:9876/

[karma]: Karma v1.4.1 server started at https://0.0.0.0:9876/

[launcher]: Launching browser Chrome with unlimited concurrency

[launcher]: Starting browser Chrome

[Chrome 57.0.2987 (Mac OS X 10.12.0)]: Connected on socket 4OBzlsVyIPZyE1AYAAAA with id 41455596

Chrome 57.0.2987 (Mac OS X 10.12.0): Executed 3 of 3 SUCCESS (0.132 secs / 0.121 secs)

and a browser will be launched as like the following:

Conclusion

You’ve learned that Angular CLI, a command-line interface that’s used to automate your current development workflow. As of today, you can achieve the following using just the Angular CLI:

• You can create a new Angular application

• You can run a development server to preview your application during development

• To build your application for deployment to an environment of your choice

• To add additional features to your Angular applications

• To run your Angular application’s unit tests

• To run your Angular application’s end-to-end tests

You’ve learned that it is not necessarily important to develop an application using Angular CLI alone, but it does help a lot to improve the quality of your code and helps save a lot of time/effort which you would’ve rather spent identifying the issues in your code.

The development of Angular CLI is still on, which means, over time we can expect more and more cool features available on this tool to develop Angular applications.

The best source for us to follow up on the latest updates on Angular CLI is the official website and also the GitHub repository if you’re really keen on gaining the technical know-how