Angular 2 Installation Introduction


Angular Versions

This post discusses how to install Angular 2, not version one. Angular 2 is the newer version that was recently released. I recommend using Angular 2, not version 1.x. If you are new to Angular, I recommend going straight to version 2 and not bothering with Angular 1.x if you don’t need to maintain any Angular 1.x code. Angular 2 is much different from version 1.x and stuyding version 1.x then version 2 will be confusing to you.

There are three ways to install Angular 2.

  • From scratch
  • Using the QuickStart. https://github.com/angular/quickstart
  • Angular CLI Tool: npm install -g angular-cli

Prerequisites

For each of these methods there are prerequisites. You need first to have Node.js installed. You also need NPM installed, however, NPM comes with Node.js so you don’t need to install it separately. You will need Git installed in order to follow the second installation method. Node.js is not difficult to install. To understand Angular 2, you should also have some background knowledge of HTML, CSS, JavaScript and using the command prompt. It also helps to have a bit of knowledge of object-oriented computer programming concepts.

QuickStart Installation Method

The QuickStart method is easy to use. In the browser go to https://github.com/angular/quickstart. Scroll down to the webpage section called “Create a new project based on the QuickStart” and copy the line of code: git clone https://github.com/angular/quickstart my-proj. Copy that to a text editor such as Notepad++. Change my-proj to the name of your project. In the example we follow here the app will be called myapp.

Open up a Git Bash command prompt. An easy way to do this is to use Windows Explorer to navigate to the folder where you store your web projects. I recommend a fairly short path, such as C:\Sites. Then, right-click on that folder and in the pop-up select Git Bash Here. Right-click in the window that opens up and select paste. Press Enter to run the command above: git clone https://github.com/angular/quickstart myapp. Next type cd myapp to change the directory to the myapp directory. Type ls to see the list of files under that directory. ls is the same as dir in the Windows command prompt, and stands for list.

Open up your editor. It is best to use either Visual Studio Code or Atom. If you want to use Visual Studio Code, start that now. From the menu, select File, Open Folder and browse to the location of your myapp folder and open that folder. Have a look around in some of the files installed.

Now we need to install the folder node_modules. To do that we go back to our command prompt in Git Bash and first check to be sure we are located in the myapp folder still. Once we verify that, type npm install. It may take a few minutes to finish installing.

Starting the Server

  1. Open a command prompt and navigate to your project’s directory.
  2. At the command prompt type npm start and press Enter.
  3. The browser should open the web page under localhost.
  4. You can stop the server in Git Bash with Ctrl+C. To re-start the server type npm start.

ScreenShots of the Installation into myapp3

Below are a series of screenshots showing the installation of Angular 2 using the Git Bash command prompt. Not all of the output is shown for the installation of the node modules because is is a few pages long.

First, open the Git Bash command prompt and navigate to the folder that contains all of your website projects. In my case, the folder is in my Windows computer under C:\Sites. I want to put my app under the folder called myapp3, in this case.

Now for the command that we got from the website.

Now we install the node_modules folder with this command: npm install

Run npm start from the command line. This starts the server and BrowserSync will automatically open your browser and show the website.

Below is what you should see in the browser if all went well. This is the Chrome browser,

What’s Next?

A good video on YouTube describes this installation process (using GitHub QuickStart) and then carries on making some edits to what’s installed automatically. The video is called Angular 2 in 60 Minutes by Traversy Media. Of course there are a few other good videos also that are worth checking out.

npm start – Errors

I got some errors after trying to re-start my project with npm start. I found a solution on the web which suggested I change my package.json file as follows:

Change the start field in package.json from


"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

to


"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",

Leave a comment

Your email address will not be published. Required fields are marked *