Creating Your First Angular 2 App Using Angular CLI – Detailed Step By Step Tutorial

The Angular Command Line Interface or Angular CLI for short, makes it easy to create an application that already works, right out of the box. It follows best practices, generates components, routes, services and pipes with just a simple command. Want more? The Angular CLI can also create simple test shells for all of these.

The Angular team recommends using Angular CLI for developing your apps.

Both the Angular CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.

To know more about the Angular CLI project, head to https://github.com/angular/angular-cli

Now, let’s see how to create your first Angular 2 app using Angular Command Line Interface.

Step 1 : Install Angular CLI

Open command prompt on windows or terminal or mac and enter the following command:

The command tells Node Packet Manager to install Angular CLI. “-g” in the above command tells npm to install Angular CLI globally.

Step 2 : Install TypeScript

In this post, we plan to develop our Angular 2 app using TypeScript. We need to make sure that we have TypeScript installed on your machine. To do that, simply enter the following command;

This will install TypeScript on your machine and if it is already installed, it will display the version number.

first-angular-cli-typescript

Now that we have Angular CLI and TypeScript installed on our machine, the next step is to create the project.

Note that we start using “ng” from here on instead of “npm” and that’s because, we now have Angular CLI installed on our machine and we can make use of it’s powers!

Step 3 : Create Project

To create a new project, just type the following command:

That should create a new project with the specified project name and all the required dependencies. Once the project is successfully created, navigate to the project’s folder using the following command:

You may have created your project in a different folder structure. Make sure you navigate to the appropriate project folder. 

Step 4 : Serve your App

Once in the project folder type the following command to run your application:

What the above command does is, it starts a development server running on http://localhost:4200 and builds all the application modules.

Step 5 : Browse your App

Open your favorite browser and navigate to http://localhost:4200. You should now see your app running!

 

angular-2-cli-step-by-step-detailed-first -app

So, there you go! You have just created your first Angular 2 App using Angular CLI in just easy 5 steps.

I have also created a video tutorial on how to create your first Angular 2 App using Angular CLI. If you like the video, please hit like and subscribe to my channel.

Leave a Reply

Top