Angular 2 Environment Setup With A Demo Project

Setting up Angular2 is simple. Follow the steps given below to create your first Angular2 Application.

1. Install Node.js and NPM. To install, click here https://nodejs.org/en/download/ and follow the instructions for the installation.
   
   
   

2. Download the QuickStart seed and unzip it.

3. Copy the folder quickstart-master to some path say D:/. For your information, this is a demo project recommended by angular.io. As of now, go with this.

4. Go to Run and open the command prompt.

5. Change the directory to the folder quickstart-master.

6. Run the commands given below in sequence. Before running, make sure that step 1 has been completed successfully.
   

   npm install
   npm start

7. It opens up your Browser and shows your first Angular message.



8. Are you done? Yes…. you are!!
9. Do not close the command prompt. Any changes later on will be reflected through automatically syncing.
   

   This should not be enough. You must be looking for some editor to edit the code and see the changes.

   I would recommend Visual Studio code, as it is a light weight code editor with useful features.

10. Install Visual Studio code here.

Once installed, open the editor and go to File > Open Folder. Locate the Application path as D:/quickstart-master and click OK.

Now, you can see an organized folder and a file structure.

Just to see the outcome of this effort, open the file app.component.ts and change the name value from ‘Angular’ to ‘World’ and your messages changes to “Hello World” now.

Note

This tutorial covers only setting up the environment for Angular 2 and not an Angular2 tutorial.