Getting started with Angular CLI

In this post I am going to show you how to install angular-cli and create a new Angular 2 application. It will be very useful if you are familiar with NodeJS, Node Package Manager(npm), TypeScript and Visual Studio Code (VSCode).

Lets get started with downloading NodeJs from https://nodejs.org/en/download/.

There are plenty of operating system to choose and since I am on Windows 10 64-bit, I am going to use the Windows Installer(.msi) 64-bit. This will install the nodejs runtime. Search and open the nodejs command prompt and install the angular-cli package using npm.

npm install -g @angular/cli

If you are using a proxy server then you might have to set the "https-proxy " value in the npm configuration as shown below.

npm config set https-proxy http://myproxy.server.com

and after a while you will see that the angular-cli installation was successful.

Lets check the version of the angular-cli by using the following command.

ng -v

As you see I am using nodejs version 6.9.2 and angular-cli is in rc1 although the current version is rc2 which has been released a couple of days ago.

So after all the required installation I’m now going to create a new application helloworld using the angular-cli.

ng new helloworld

and you will see that the angular-cli has created a bunch of folders and files under the helloworld folder.

In order to run the application I’m going to use the ng serve command to run the application.

By default the application runs on port 4200 so lets browse to http://localhost:4200 and you can see the application is up and running and you can change the default port to any port by specifying the –p parameter to the ng serve command.

Lets open the project root folder using Visual Studio Code and modify the app.component.ts (TypeScript) file.

As soon as I change the title property of the AppComponent to "Hello world from Angular 2" the page automatically refreshes and shows my changes, I don’t have to hit F5 or refresh the page at all.

Congratulations you just created your first Angular 2 application using angular-cli.

Advertisement