Simplifying Angular CLI for beginners

So you want to write your first Angular application, however setting up even a ‘Hello World’ Angular application is not easy. It requires many steps such as:

  • Setting up a TypeScript compiler, if you choose to use TypeScript
  • Configuration of Webpack or other module loader
  • Setting up local web development server
  • Installing and configuring dependencies
  • Configuring Unit Test environment
  • Configuring End to End Test environment
  • Working with Continuous Delivery
  • Working with Continuous Integration and many more

You can perform all these tasks manually, but this will require a strong understanding of all these concepts and will make starting a new project very time consuming. To solve this problem, Angular comes with the Angular Command Line Interface (CLI).

Learn more about it here: https://cli.angular.io/

All these tasks are taken care of by Angular CLI, which is a command line tool for creating, testing, and deploying Angular apps. It is recommended to use Angular CLI for creating Angular apps, as you do not need to spend time installing and configuring all the required dependencies and wiring everything together. It provides you with many boilerplates and saves your time.

It uses Webpack to include all the packaging, the loading module, importing functionality, BrowserLink and more. The entire Webpack configuration is done completely by CLI so you don’t have to worry about it. It also configures Jasmine and Karma for unit tests and TypeScript complier to transpile TypeScript file to JavaScript etc.  Let us see how we can work with Angular CLI.

Learn full article on the Infragistics blog

How to upgrade to latest Angular CLI

To check which version of Angular CLI is installed on your machine, run the command ng –version as shown in the image below:

image

As you see that on my development machine, Angular cli version 1.0.0 is installed. At the time of writing of this post, latest version of Angular CLI was 1.1.3.

To upgrade to updated version of the Angular CLI, you need to run couple of npm commands. To upgrade it globally on your development machine , first run npm uninstall command as shown below :

image

 

This command will remove all the installed Angular modules from the system. Since we are upgrading the package globally, next execute npm cache clean command as shown below:

image

You need to run this command as administrator. Next to install latest version of Angular CLI run command npm install –g @angular/cli@latest as shown in the image below:

image

Once latest version of Angular is successfully installed, run the ng –version command to verify whether latest version is installed or not .

image

You can see that now Angular CLI version 1.1.3 is installed in my development machine. Sometimes you may have to upgrade Angular CLI in the project folder only. I hope you find this small post useful.