How to Install Angular and Set Up Development Environment

In this tutorial learn how to install Angular. We use the Angular CLI to install the Angular, which hides the lots of complexities of installing Angular. But before installing Angular, we need to Install the NPM Package manager and also decide on a Code Editior to use.

Choosing and Installing an Editor

You need to choose an editor for creating your angular projects. You can choose any editor of your choice including any editions of Visual Studio, Eclipse, Atom etc.

We will be using Visual Studio code as our editor. Visual studio code is an open source project and free to use. It can run on Windows, Linux & OS X. It has IntelliSense support, easy integration with Git and support for debugging the applications. It has a great support for Typescript

Installing Visual Studio Code

You can download Visual Studio Code from the following link. The installation procedure is an easy task and straightforward process.

Install Package Manager

To install Angular and dependencies, we are going to Node Package Manager or NPM.

Node Package Manager

The NPM is a Package Manager similar to what NuGet is for Visual Studio. It is the Package manager of choice for the Javascript projects. NPM is used to install libraries, Packages & applications from Public repositories.

Why it is Required

We are going to use NPM to install Angular, Typescript, and any other packages/modules required by our application. NPM is can be used to upgrade these packages as and when necessary. Without NPM, we have to download and install all these packages manually.

Installing NPM

You need to install NPM on your machine if it is not already installed.You can test whether the NPM is installed or not by using the command prompt

If NPM is installed, then it will return the version No. The current version No of the NPM is 6.13.7.  You can download NodeJS and install it. NPM is installed as part of the NodeJS. Click on the installing node for the instructions and procedures.

NPM Configuration

The NPM requires the Package.json file, which should contain the list of modules/packages used in your Application. We need to add all the list of dependencies required by our application the configuration file.

Once the Package.json is created, we can install all the dependencies, by running the following command from the command prompt

We will show the sample package.json required in our next tutorial.

Choosing a Language

We need to choose a language to write our angular application. The Angular Applications must be written in Javascript. This gives us few options, including the current version of Javascript (i.e. ES5), ES2015, Typescript, and Dart, etc.

The Typescript is a popular choice here. The Angular code is also written using Typescript. Many of the tutorials available on the internet also using Typescript. So we will go with the popular choice

What is Typescript

The Typescript is a superset of Javascript. The Code written in Typescript cannot be used directly in the web browser. It must be compiled to Javascript before running in the web browser. This process is known as Transpiling.

Typescript is an Open source language. It is built and maintained by Microsoft.

Why Typescript

The Javascript is the default language of the web. But it does come with few problems. It does not support types. This makes it prone to run-time errors, it also makes it difficult to debug. Javascript does not support namespaces. Code Organisation is another major issue with Javascript code. Typescript Solves all these problems.

Features of Typescript

Typescript also supports Modules, classes, Interfaces, and Generics. This makes Typescript an ideal choice for our Angular Application.

Typescript Supports all current specifications of Javascript (i.e. ES5 & ES2015 ). The major advantages of Typescript are that you can transpile it to either ES5 or ES2015. Currently, not many browsers support ES2015. So you have to transpile your code to ES5. But in future, as more and more browser becomes ES2015 compliant, you do not have to worry about upgrading your Javascript code. Typescript does that to you behind the scene.

Installing Typescript

The Typescript is automatically installed by Angular when we install the Angular CLI

Angular CLI also installs and maintains the Typescript configuration files, i. e. tsconfig.json and typings.json.

Installing Angular

We install Angular using the Angular Command Line Interface (Angular CLI)

The Angular CLI helps us to quickly create an Angular application with all the configuration files and packages in one single command. It also helps us to add features (componentsdirectivesservices, etc) to existing Angular applications.

The Angular CLI creates the Angular Application and uses TypescriptWebpack ( for Module bundling), Karma ( for unit testing), Protractor ( for an end to end testing).

Installing Angular CLI

We use the npm command to install the Angular

The above command installs the latest version of Angular CLI in your machine. Note that we have used the -g flag, (which stands for global) installs the Angular CLI system-wide so that you can use it in your all projects.

You can also install the older version of Angular as shown below

Finding the Angular CLI Version

You can find out the Currently Installed Angular CLI Version by Using the Command

The latest version as of writing this article is 11.1.0. The command above also gives the version of the node installed in your system. You can keep track of the latest Angular CLI release from this link 

The Angular CLI also installs the Typescript and all its dependencies.

With the installation of Angular CLI, you are ready to create your first Angular Application.

Module Loaders

The initial version of Angular 2 allowed us to choose the Module Loader. But the later versions of Angular comes bundled with the Webpack module loader.

Hence, we do not need to install it.

What is a Module Loader

Module loader takes a group of modules with their dependencies and merges them into a single file in the correct order. This process is called as Module bundling.

Why Module Loader Required

In Our applications, we create a lot of javascript files. We then include them in our main HTML file using the <script> tag. When user requests for your file, the browser loads these file. This is inefficient as it reduces the page speed as the browser requests each file separately.

The above problems can be solved by bundling several files together into one big file. The entire file can be downloaded in one single request reducing the number of requests. You can also minify the file (remove the extra spaces, comments, unnecessary characters, etc) and make files smaller

There are many module loaders are available. The two more popular Module loaders are Webpack and SystemJS

Webpack is the Module Loader than Angular installs when we use the Angular CLI. It also configures it, Hence we do not need to anything

Summary

In this tutorial, we looked some of the tools and third-party libraries, which are required to develop and run our Angular Application. In the next tutorial let us build our First Angular Application

References

  1. webpack

5 thoughts on “How to Install Angular and Set Up Development Environment”

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top