Tutorial – 4 – Hello World App

Let’s Create Hello World ! App

Step1


Create Angular 5 Project with the help of Angular CLI command

ng new Project_Name

Ex : ng new Demo

screen-shot-2018-01-27-at-3-10-47-am

Step2


Project Structure

screen-shot-2018-01-27-at-3-12-23-am

Step3


Run the default project

ng  serve
screen-shot-2018-01-27-at-3-31-39-am

Once you see the message “Webpack : Compiled successfully” , Head over to browser and browse the url : http://localhost:4200/
screen-shot-2018-01-27-at-3-35-14-am

Step4


Head over to app.component.ts and do the changes

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

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})

export class AppComponent {
    greetMessage = 'Hello World!';
}

Head over to app.component.html and do the changes

<h1>{{ greetMessage }}</h1>

Finally Output

screen-shot-2018-01-27-at-3-41-38-am

Let’s Create Hello World ! App in Visual Studio


Step1

Setup for local development

git clone https://github.com/angular/quickstart.git quickstart 
cd quickstart 
npm install 
npm start

Step2

Delete non-essential files (optional)

OS/X (bash)

xargs rm -rf < non-essential-files.osx.txt 
rm src/app/*.spec*.ts 
rm non-essential-files.osx.txt

Windows

for /f %i in (non-essential-files.txt) do del %i /F /S /Q 
rd .git /s /q 
rd e2e /s /q

screen-shot-2018-01-27-at-7-54-22-pm

Step3

Create Web Project in Vs2017

screen-shot-2018-01-27-at-7-57-10-pm

screen-shot-2018-01-27-at-7-57-47-pm

Step4

Copy the Quickstart files into the Project and include these files in the project.

screen-shot-2018-01-27-at-8-02-02-pm

Step5

Update the dependency versions in package.json.

screen-shot-2018-01-27-at-8-09-05-pm

Step6

Now Update the node modules

screen-shot-2018-01-27-at-8-12-29-pm

Or npm install

Step7

update tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
         "sourceMap": true,
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
         "lib": [ "es2015", "dom" ],
         "noImplicitAny": true,
         "suppressImplicitAnyIndexErrors": true
    }
}

Step8

Update systemjs.config.js

paths: {
       // paths serve as alias
       'npm:': '/node_modules/'
},

Step9

Change the root path in index.html(set as start page)

<base href="/src/">

Step10

Press Control+F5

screen-shot-2018-01-27-at-8-41-32-pm

Leave a Reply

Your email address will not be published. Required fields are marked *