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: fsev[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 { }
Output:
Start the server using ng serve command and hit on the url http://localhost:4200
Chirag Shah says
Very well explained for novice. thanks a lot