By Gary simon - Oct 19, 2016
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:
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.
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.
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
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.
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!
Use the command line to run the following:
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.
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:
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).
In the command line, all we do now is run:
..and that's it! That's how you manually install an Angular 2 project based on the official quickstart documentation.