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

Step2

Project Structure

Step3

Run the default project

ng  serve

Once you see the message “Webpack : Compiled successfully” , Head over to browser and browse the url : http://localhost:4200/

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

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

Step3

Create Web Project in Vs2017

Step4

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

Step5

Update the dependency versions in package.json.

Step6

Now Update the node modules

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/'
},

<base href="/src/">

Step10

Press Control+F5