How to Install an Angular 4 App

Note: Angular 5 is now released. Read How to Install Angular 5

Angular 4 is here and it's time to get started. If you're brand-spanking-new to Angular, you might have arrived on this tutorial with confusion as to how you start an actual Angular 4 project. 

If that's the case, you've come to the right place! There are a few different ways to get started with an Angular 4 project.

• You can install it manually by hand
• You can use the Angular-CLI (Command Line Interface) to install it for you
• You can upgrade an Angular 2 project to an Angular 4 project
• You can clone an Angular 4 project at Github

First, if you prefer watching a video on this..

Be sure to subscribe to the youtube channel for more awesome videos!

Dependencies

Before we can begin, you need to ensure you have a few dependencies installed.

• Node.js with NPM (Node Package Manager)
• Angular-CLI (Command Line Interface)

To check whether or not you have Node.js installed, visit your console / command line and type:

> node -v

If this command goes unrecognized, you need to install Node.js.

1. Visit the Node.js download page and choose either the Windows or Mac installer based on your OS.
2. Accept the agreement, choose an installation folder, and hit Next on the Custom Setup page. By default, it will install the npm package manager which we will need.

After it's installed, close your console / command line and reload it. You can now run the node -v command and it will provide you with the current version number.

Next, we need to install the Angular-CLI. This tool allows you to create Angular projects as well as help you with various development tasks.

At the console, type:

> npm install -g @angular/cli

Once finished, type:

> ng -v

The resulting output will look something like this:

    _                      _                 ____ _     ___ 
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/                                        
@angular/cli: 1.0.0                                  
node: 6.10.0                                              
os: win32 x64                                                                   

When we run ng -v while inside an Angular project folder, it will also provide us with which version of Angular that particular project is using. 

Installing Angular 4 with the CLI

The easiest way to get up and running with a fresh Angular 4 project is to use the CLI that we just installed.

NOTE: As of March 24, 2017 -- You no longer need to specify the --ng4 flag. The CLI will install an Angular 4 project by default.

To start a new ng4 project, at the console, type:

> ng new my-project-name
// let it install

> cd my-project-name

After about a minute or so, you'll be all set!

Installing Angular 4 without the CLI

If you prefer to install Angular 4 without the command line tool, you can install it manually with the help of the Angular Quickstart.

At the time of writing this tutorial, there is not an Angular 4 Quickstart repository. The current quickstart is based on Angular 2. Still, you can use git to clone the quickstart and run through the upgrade process outlined above.

To use the Angular 2 Quickstart, you run:

> git clone https://github.com/angular/quickstart.git quickstart

Note: You will need the git command line tool to run the above command.

After it's installed:

> cd quickstart
> npm install

If it's installing an Angular 2 project, this is the point where you need to upgrade it manually using npm:

To upgrade, paste (Mac only):

> npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save

To upgrade, paste (PC only):

> npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

Then, we need to make sure we're using Typescript 2.1.6 or higher (you can skip this step if your CLI installs Angular 4 by default):

> npm install typescript@2.2.1 --save

And that's how you install (and upgrade, if need be) an Angular 4 project using the Angular CLI.

Once it's ready, we type:

> npm start

Note: If you use this method, you will not be able to utilize the various helpful commands provided by the Angular-CLI while developing your Angular 4 app.

And that's it!

That's all there is to getting up and running with a new Angular 4 project. As you can see, the Angular-CLI makes it easy to start a new project. Simply run ng new project-name and you're ready to rock.