How to Install Angular 2 - The Manual Quickstart Method

If you're new to Angular 2, you're probably wondering how exactly you get it installed. If that is the case, then you've come to the right place!

First, if you prefer a video tutorial instead of written, you can watch the video we created on this topic:

You can install Angular 2 through several different methods:

• Manually installing Angular 2 with the guidance of the quickstart documentation
• Installing Angular 2 by cloning the Quickstart repo
• Installing Angular 2 with the Angular-Cli

In this tutorial, you'll learn how to install it manually with the quickstart documentation as a guide. First, you may ask yourself, why should I install it manually?

Well, it's always a good idea to learn how to install something manually before you rely on the aid of more automated solutions, such as through the Angular-cli.  Doing so will help you understand the Angular 2 project structure. So let's get started.

Step 1: Visit the Angular.io Quickstart page

Now, because the quickstart page may change, it would be a good idea to visit said page in case the steps have changed.
You can find that page right here.

Step 2: Create the project folder

You can either use file explorer to create the folder, or use a command line tool. If you use a command line, this is what the syntax looks like:

mkdir your-angular-project-name
cd    your-angular-project-name

Step 3: Ensure Nodejs and NPM are Installed

As the quickstart documentation asserts as a prerequisite, you need to ensure that Nodejs and NPM are installed. They're 2 separate entities, however, when you install Nodejs, NPM is installed automatically.

You can install Nodejs by visiting their official website here.

Step 4: Create package.json, tsconfig.json, typings.json and systemjs.config.js

These are referred as the configuration files for angular 2. On the quickstart page, they provide you with a tabbed layout from which you can copy and paste the contents of these files in your newly created project folder. Simple enough!

Step 5: Use "npm install" to install the packages

Use the command line to run the following:

npm install

Note: You must be in the same folder as the configuration files.

Running "npm install" will fetch and install all of the necessary dependencies that are specified in the configuration files. They'll reside in a folder called "node_modules". You won't have to tamper with this folder or the contents of this folder.

Step 6: Create the App Folder & Populate it with 3 Files

This "app" folder belongs off the root of the main project folder (ie: your-project-name/app). You can use the command line "mkdir app" command to create this folder.

After that, per the Quickstart Documentation for this particular step, you need to create 3 files that reside in this new "app" folder:

• app.module.ts
• app.component.ts
• app.main.ts

Step 7: Create the index.html & styles.css Files

Based on the Quickstart Documentation for this step, copy and paste the contents of both the index.html and the styles.css and place them inside the root project folder (not the app folder).

Step 8: Run "npm start"

In the command line, all we do now is run:

npm start

 ..and that's it! That's how you manually install an Angular 2 project based on the official quickstart documentation.