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.
Table of Contents
- Choosing and Installing an Editor
- Install Package Manager
- Choosing a Language
- Installing Angular
- Module Loaders
- What is a Module Loader
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
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.
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.
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
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
Typescript is an Open source language. It is built and maintained by Microsoft.
Features of Typescript
Typescript also supports Modules, classes, Interfaces, and Generics. This makes Typescript an ideal choice for our Angular Application.
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.
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 (components, directives, services, etc) to existing Angular applications.
The Angular CLI creates the Angular Application and uses
Webpack ( 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
npm i -g @angular/cli@latest
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
npm i @email@example.com
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.
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
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
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