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
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/' },
Step9
Change the root path in index.html(set as start page)
<base href="/src/">
Step10
Press Control+F5