Angular 5 Hello World Step By Step (formerly Angular 2) + Angular CLI

In this Angular 5 tutorial, we will learn how to create an Angular 5 Hello World application using Angular CLI. Angular 2/4/5 is completely new framework than Angular Js 1.X and written in Typescript, a superset of JavaScript. In order to use TypeScript, we need to install the compiler which runs on top of Node.js. In this Angular5 hello world example, I will be using node v7.8.0 and npm v5.8.0.

Environment setup for Angular 2 /Angular 4 / Angular 5 is the same.

Step 1: Prerequisites

Install Node.js & npm

If you’re using Windows or MAC, download one of the installers from the Node.js download page. Make sure you are downloading and installing the version which is labeled “LTS” and not the “Current” version.
Once Node.js is installed, validate the installation by opening the Node.js command prompt/command prompt and type the command “node -v” (without quotes), it should display the version of the Node.js
Now we need to install npm, run the command “npm install [email protected] -g” (without quotes) to install the latest we version of the npm.
Once npm is installed, run the command “npm -v” to get the version of the npm installed.

Install Angular CLI

Creating a new Angular app is a bit tedious job especially when you are new to Typescript as there will be lot of initial configurations involved. In order make it simpler Google came up with the utility called Angular CLI, using which we can create and manage our app from command line itself

In order to install Angular CLI open Node.js command prompt/command prompt and run the below command

npm install -g @angular/cli

Install Code Editor

I am using Microsoft Visual Code Studio as my Angular Editor, You are free to choose your own editor as there will lot of free tools such as Brackets, Notepad++, Sublime Text etc.. which can be used as an Angular editor.

Step 2: Create our First Angular 5 Hello World application

Once after installing all the above prerequisite, we are all set for building our first Angular 5 Hello World application.

Create a new folder for our all our Angular 5 code in my case, I am creating a folder name “Angular5”, in the Node.js command prompt navigate to the folder.
Use the ng new command to create our Hello World Angular Project “ng new hello-world-app” (without quotes), Angular CLI will create our project with below content.

C:\Angular5\hello-world-app>ng new hello-world-app
  create hello-world-app/e2e/app.e2e-spec.ts (297 bytes)
  create hello-world-app/e2e/app.po.ts (208 bytes)
  create hello-world-app/e2e/tsconfig.e2e.json (235 bytes)
  create hello-world-app/karma.conf.js (923 bytes)
  create hello-world-app/package.json (1300 bytes)
  create hello-world-app/protractor.conf.js (722 bytes)
  create hello-world-app/README.md (1029 bytes)
  create hello-world-app/tsconfig.json (363 bytes)
  create hello-world-app/tslint.json (3012 bytes)
  create hello-world-app/.angular-cli.json (1250 bytes)
  create hello-world-app/.editorconfig (245 bytes)
  create hello-world-app/.gitignore (544 bytes)
  create hello-world-app/src/assets/.gitkeep (0 bytes)
  create hello-world-app/src/environments/environment.prod.ts (51 bytes)
  create hello-world-app/src/environments/environment.ts (387 bytes)
  create hello-world-app/src/favicon.ico (5430 bytes)
  create hello-world-app/src/index.html (300 bytes)
  create hello-world-app/src/main.ts (370 bytes)
  create hello-world-app/src/polyfills.ts (3114 bytes)
  create hello-world-app/src/styles.css (80 bytes)
  create hello-world-app/src/test.ts (642 bytes)
  create hello-world-app/src/tsconfig.app.json (211 bytes)
  create hello-world-app/src/tsconfig.spec.json (283 bytes)
  create hello-world-app/src/typings.d.ts (104 bytes)
  create hello-world-app/src/app/app.module.ts (316 bytes)
  create hello-world-app/src/app/app.component.html (1141 bytes)
  create hello-world-app/src/app/app.component.spec.ts (986 bytes)
  create hello-world-app/src/app/app.component.ts (207 bytes)
  create hello-world-app/src/app/app.component.css (0 bytes)
npm WARN deprecated [email protected]: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/
npm WARN deprecated [email protected]: This project is unmaintained
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issu
e introduced in 2.1.0
npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: This project is unmaintained
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import iss
ue introduced in 2.1.0

> [email protected] install C:\Angular5\hello-world-app\hello-world-app\node_modules\uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0


> [email protected] install C:\Angular5\hello-world-app\hello-world-app\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/win32-x64-51_binding.node
Download complete..] - :
Binary saved to C:\Angular5\hello-world-app\hello-world-app\node_modules\node-sass\vendor\win32-x64-51\binding.node
Caching binary to C:\Users\xbbl47m\AppData\Local\npm-cache\node-sass\4.8.3\win32-x64-51_binding.node

> [email protected] postinstall C:\Angular5\hello-world-app\hello-world-app\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js


> [email protected] postinstall C:\Angular5\hello-world-app\hello-world-app\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Angular5\hello-world-app\hello-world-app\node_modules\node-sass\vendor\win32-x64-51\binding.node
Testing binary
Binary is fine
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Angular5\hello-world-
app\hello-world-app\node_modules\fsevents\node_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","ar
ch":"x64"})

added 1259 packages from 1242 contributors in 162.821s
Project 'hello-world-app' successfully created.

Step 3: Run our first application

Traverse into the hello-world-app at the command prompt (C:\Angular5\hello-world-app) and run the command ng serve, this command will start the server and will launch the default Angular Application build by Angular CLI

hit on the URL : http://localhost:4200/

Output:

Step 4: Creating a Custom Component [helloworld.component.ts ]

Open Code editor (Microsft Visual Code studio) and open our Hello World Application folder (C:\Angular5\hello-world-app)

Create a new folder helloworld, under the src –> app –> helloworld and create a new file named “helloworld.component.ts”, with the below content

import { Component } from '@angular/core';

@Component({
    selector: 'app-hello',
    templateUrl: './helloworld.component.html'
})
export class HelloWorldComponent
{

}

At the first line, we are telling the compiler to import the Component object from ‘@angular/core’ library.
@Component Decorator provides the meta-data information about the class. In the above code we have used two properties selector, templateUrl
- selector: selector property indicates the tag name which we are going to use in DOM (HTML)
- templateUrl: templateUrl property represents the name of the html file, in our case, it is “helloworld.component.html”, so whenever we use the <app-hello> </app-hello> tag it will be replaced with the content of the “helloworld.component.html”.
Instead of using the templateUrl, we can use the template property and specify the content of the html inline as below.

import { Component } from '@angular/core';

@Component({
    selector: 'app-hello',
    template: '<h3>Angular 5 Tutorial</h3>'
})
export class HelloWorldComponent
{
}

Step 5: HTML Template [helloworld.component.html ]

create a new file named “helloworld.component.html” under the src –> app –> helloworld folder with the below content

<h3>Angular 5 Tutorial</h3>

Step 6: app.component.html & app.module.ts

app.component.html

Replace all the content of the app.component.html with the below content.

<app-hello></app-hello>

app.module.ts

Import HelloWorldComponent and add HelloWorldComponent into declarations of our app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
 import { HelloWorldComponent } from './helloworld/helloworld.component';

@NgModule({
  declarations: [
    AppComponent,
     HelloWorldComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }