How to Install Angular 5 (Tutorial)

The following tutorial is a part of our 100% free course Learn Angular 5 from Scratch - Angular 5 Tutorial

Exciting times! Angular 5 is released and now you're looking to get your feet wet with one of the most popular (if not the most) modern frontend javascript frameworks.

Fortunately, if you already have experience with Angular 2 or 4, the process of starting a new Angular 5 project is pretty much the same.

However, if you have no previous experience with Angular, don't worry -- installing Angular 5 is a breeze. So, let's get started.

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Prerequisites

You're going to need a couple things before proceeding:

• Node.js
• Node Packange Manager (NPM)

To check whether or not you have both of these installed, visiting your command line or console and type:

$ node -v
$ npm -v

If either of these commands are unrecognized, visit the downloads section of Nodejs.org and download/run the appropriate installer based on your OS.

Follow through the installation steps with default settings, which will install NPM by default. Once finished, reload your command line / console and retype the above commands -- they should now give you version numbers.

Installing Angular 5 through the CLI

The Angular CLI (Command Line Interface) is the quickest and easiest way to get started with a brand new Angular 5 project. 

We're going to use NPM (you can also use yarn) to install the Angular CLI through the following command:

$ npm install @angular/cli -g

Once installed, you can access the CLI tool by typing ng.

To check the version of your Angular CLI, type:

$ ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.0
Node: 6.10.0
OS: win32 x64
Angular:
...

As you can see, mine is currently at version 1.5.0. Great, now we're ready to use the CLI to start the project.

To install Angular 5 through the CLI, type:

$ ng new my-new-project --style=scss --routing

The two flags we added at the end specify that we want the CSS to use the Sass compiler, and --routing tells the CLI to provide us with the routing scaffolding.

It will run for awhile and then prompt you that you can cd into the new project folder. To do that, simply type:

$ cd my-new-project

To serve your project in the browser, which is useful for development as it automatically compiles your project and reloads it in the browser, type:

$ ng serve

And that's it! You have a fresh copy of Angular 5 ready and waiting for you to develop.

Angular CLI Options

We ran the command: ng new my-new-project which is the bare minimum requirements for using the CLI to start a new project.

However, there are other flags you can pass to the ng new command. The official Angular CLI wiki page will show you all of the commands, and if you click on the ng new command, you will find that it supports the following flags:

directory
dry-run
inline-style
inline-template
minimal
prefix
routing
skip-commit
skip-git
skip-install
skip-tests
source-dir
style
verbose

The documentation allows you to click on each option above, providing you with the actual flag to use during installation, and the default value.

So, for instance, if you wanted to set up your new Angular 5 project to work with Sass styling, you would run the following command:

$ new new projectName --style=scss    (or --style=sass)

Another common flag I add to new projects that I know will require routing is:

$ ng new projectName --routing

Then, of course, if you wanted to combine the two above (a project with Sass support and routing), like we did with our initial project:

$ ng new projectName --style=scss --routing

This will setup the basic scaffolding to handle an Angular 5 app with multiple routes (or put differently, multiple URL's).

I won't run through all of the other options, as you can use the documentation to see what they offer based on your needs.

Installing Angular 5 without the CLI

The Angular Quickstart page allows you to download a zip file containing the basic structure of an Angular 5 project. 

Once downloaded, extract all of the folders and file to a new project folder.

Then, once in the directory within your console or command line, type:

$ npm install

At that point, you can run ng serve as you normally would.

Conclusion

Getting started with an Angular 5 project with the help of the CLI makes it very fast and also quite flexible with the variety of flags you can use.

Now that we have a new project ready to go, in the next video, we're going to learn about the very basics of Angular 5 -- which are components.

The following tutorial is a part of our 100% free course Learn Angular 5 from Scratch - Angular 5 Tutorial