Angular : Getting started with Angular with Angular CLI, Installation and Hello World Example

Install and Setup Angular

Before we start, lets install the angular cli with the following command

npm install -g @angular/cli

Angular CLI is a tool that can

1. make a new project,
2. compile your typescript files,
3. configure your typescript compiler
4. run your code with live preview,
5. build and package your project.

Note

Make sure you have latest node and npm installed, at least node version 6.9.x and npm version 3.x.x. To see the versions you can run commands node -v and npm -v for node and npm versions respectively.

 Warning
While installation you might get the following warning
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/@angular/cli/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})


You can skip them, since they are optional warnings

Making First Angular Project

To create a new project in angular you can use the angular cli command

ng new <project-name>

Let's say we want to create a project hello then the command will be ng new hello. This will create a new project inside a folder hello we specified while creating the project.

Now go inside the directory. You can do the following now,

1. Run ng serve for a dev server.
2. Run ng generate component component-name to generate a new component.
3. Run ng build to build the project.
4. Run ng test to execute the unit tests via Karma
5. Run ng e2e to execute the end-to-end tests via Protractor

Now run the commands to see the app working

cd  <project-name>
ng serve

This will start a local server and start the angular application on this server.