In this tutorial, you can learn how to install Angular. We use the Angular CLI to install Angular, which hides the complexities of installing Angular. But before installing Angular, we must install NodeJs, NPM Package manager, and Visual Studio Code.
Table of Contents
How to Install Angular
To install Angular, you will need to install the following.
- Install Visual Studio Code.
- Install Node.js and npm (Node Package Manager)
- Install the Angular CLI
Installing Visual Studio Code
When it comes to choosing an IDE to develop Angular applications, we have a lot of choices. You can select Angular IDE, Webstorm, Sublime Text, 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, and OS X. It has IntelliSense support, easy integration with Git, and support for debugging applications. Visual Studio code also has excellent support for Typescript.
You can download Visual Studio Code from the following link. The installation procedure is an easy task and a straightforward process.
Installing NodeJs & NPM Package Manager
Why NodeJs is Required
You must install NodeJs and the NPM package manager to develop an Angular application. Note that both of them are not required on the production server.
Angular uses Node.js for its build and development tools. For example, the angular compiler needs to transpile the TypeScript code into JavaScript. It also needs to perform steps like minification, bundling, and build optimization of the final code. To run all these tools, it needs Node.js.
NodeJs also spins up a lightweight web server. Angular uses it to host the application during development.
NPM Package Manager (NPM)
Angular uses the Node Package Manager to install and manage all of its dependencies. NPM Package manager comes bundled with the NodeJs
We will use NPM to install Angular, TypeScript, and any other packages/modules our application requires. NPM can be used to upgrade these packages as and when necessary. Without NPM, we have to download and install all these packages manually.
Installing NodeJs
You can download NodeJS and install it. NPM is installed as part of NodeJS. Click on the installing node for the instructions and procedures.
Installing Typescript
Angular requires Typescript. But you do not need to install it separately. It will be taken care of when you install Angular.
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 (components, directives, services, etc) to existing Angular applications.
The Angular CLI creates the Angular Application and uses Typescript, 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
1 2 3 | 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.
In Windows machines the npm requires rights to run the PowerShell scripts. By default it may be disabled in windows client. You may need to enable it, if you want to install Angular CLI via npm. You can enable the rights by running the following script
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
Read the message and follow the directions. Also, be sure you understand the implications of setting up an execution policy.
You can also install the older version of Angular as shown below
1 2 3 4 5 | md Angular6 cd Angular6 npm i @angular/cli@6.1.1 |
Finding the Angular CLI Version
You can find out the Currently Installed Angular CLI Version by Using the Command
1 2 3 | ng --version |
The latest version 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.
Create a new application
To create a new application, run the following command
1 2 3 | ng new helloWorld |
This will create a new workspace and a project called helloworld. To run the new application run the following command
1 2 3 4 | cd helloWorld ng serve |
Open the browser and go to http://localhost:4200/
Summary
To install Angular, you need to install the following
- Install Visual Studio Code.
- Install Node.js and npm (Node Package Manager)
- Install the Angular CLI using the command
npm i -g @angular/[email protected]