Angular 4 Setup Guide for Development Environment!

Step 1. Setup the Development Environment

1. Install Node.js and NPM -If you are not already have on your machine!

2. Then you Install the Angular CLI globally!

npm install -g @angular/cli

Step 2 - Navigate to project directory and Create a new project!

$ cd ~/Dev/
$ mkdir appDir && cd appDir 
$ ng new my-app

Note - ng new takes time to run!

Step 3 - Navigate to project & Run Local Server!

$ cd /path/to/your/newly/created/app/

$ cd ~/Dev/appDir/my-app/
$ ng serve

Open local host - http://localhost:53865/

Note –The ng serve command is used to launches the server, watches your files and rebuilds the app as you make changes to those files!

Step 4 -Edit Project and Save files

- Open file in appDir/my-app/src/app/app.component.ts, EDIT and SAVE

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

 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'Welcome you in Angular 4!';
 }

Step 5. Test build

ng build

Reference - https://angular.io/guide/quickstart

I hope you are enjoying with this post! Please share with you friends! Thank you!!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular 4 Setup Guide for Development Environment!

Reviewed by Anil Singh on 4:41 AM Rating: (5)