Skip to main content

Setup for Angular 7 application

Before you start an angular project, we need to set up an environment for angular development.

We need to have NodeJs and NPM (node package manager)  in our system. It is not necessary for Angular development but it makes the development easy. NPM is used to download the libraries and packages we need for the development.

You can check the version of node and npm avaible in your system through command prompt or terminal. Here is the command.

for node version:   node -v 
for npm version:    npm -v

GC02PH6MAG3QDE:my_book himanshusharma$ node -vv10.14.0GC02PH6MAG3QDE:my_book himanshusharma$ npm -v6.7.0

In my system, current version of node is 10.14.0 and npm is 6.7.0 when I am writing this article, yours can be different.

Now we need to install angular/cli using npm. Angular/cli makes it easy to create a angular application that already works, out of the box.


npm install -g @angular/cli 

-g is a flag which installs angular/cli globally in our system, so that we can create new angular application from any path in our system.Once the command executed successfully we can confirm the angular version.

ng v     _                      _                 ____ _     ___    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|                |___/
Angular CLI: 7.2.0Node: 10.14.0OS: darwin x64Angular:...Package                      Version------------------------------------------------------@angular-devkit/architect    0.12.0@angular-devkit/core         7.2.0@angular-devkit/schematics   7.2.0@schematics/angular          7.2.0@schematics/update           0.12.0rxjs                         6.3.3typescript                   3.2.2

Here we can see, our angular/cli version is 7.2.0

Now we can browse to path where we want to create new angular application through command prompt.And then create new application using command 'ng new <project-name>.
Here I have given my-awesome-app as project name.
It will then prompt if we want routing in our application, I choose yes simply by giving y
Then it asks us to choose stylesheet format which we can choose using up/down arrow key
(I chose SCSS) and hit Enter.
Here is the screen

GC02PH6MAG3QDE:~ himanshusharma$ cd documents/my_book/GC02PH6MAG3QDE:my_book himanshusharma$ ng new my-awesome-app? Would you like to add Angular routing? Yes? Which stylesheet format would you like to use?  CSS❯ SCSS   [ http://sass-lang.com   ]  SASS   [ http://sass-lang.com   ]  LESS   [ http://lesscss.org     ]  Stylus [ http://stylus-lang.com ]REATE my-awesome-app/README.md (1029 bytes)CREATE my-awesome-app/angular.json (3931 bytes)CREATE my-awesome-app/package.json (1313 bytes)..npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.⸨ ░░░░░░░░░░░░░░░░░⸩ ⠴ fetchMetadata: sill pacote range manifest for asn1@~0.2.3 fetched in 52ms

Then it will start creating folder structure and file which will take a while. Once its done we will get something like this in the end

added 1190 packages from 1186 contributors and audited 41236 packages in 27.237s

Note: Added package number can be different in your system

Now we can browse to application folder(here my-awesome-app) and do 'ng serve' to run the application.



himanshusharma$ cd my-awesome-app/
GC02PH6MAG3QDE:my-awesome-app himanshusharma$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-04-22T12:56:13.745Z
Hash: 842f49450cb42ab021df
Time: 6245ms
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.76 MB [initial] [rendered]
ℹ 「wdm」: Compiled successfully.

As it says "Angular Live Development server is listening on localhost:4200, we can browse to http://localhost:4200 and we should see some thing like below:


Hurray !! Our angular project is up,we can start the development.

Thank you

Comments

Popular Posts

Come Closure in Javascript

What is a closure? If we want to derive a definition,we can say, A closure is a feature of Javascript where inner function has access to the outer (enclosing) function’s variables—scope chain. This scope chains means inner function has: access to its own scope (variables defined between its curly brackets and its parameters),access to the outer function’s variables and parameters, access to the global variables. Now we will look into it in detail. Consider following example
var globalVar = "xyz"; function outerFunc(outerArg) { var outerVar = 'Alex'; function innerFunc(innerArg) { var innerVar = 'Chris'; console.log("globalVar = " + globalVar); console.log("outerArg = " + outerArg); console.log("innerArg = " + innerArg); console.log("outerVar = " + outerVar); console.log("innerVar = " + innerVar); } innerFunc(456); } outerFunc(123); In this example, i…

Javascript Hoisting Interview Question and Answers - 5

In this post,I have tried to cover all the types of possible interview questions and answers on hoisting. If you are not familiar with the hoisting, I would highly recommend you to go to my post on hoisting. Once you are comfortable with the topic, you can attempt these questions. Understanding the type of question will help you to answer. I have provided the hint after each question. All the answers are given at the end of the post.
//Question 1 console.log('bar:', bar) bar = 15 var foo = 1 console.log(foo, bar) var bar Hint: Basics of hoisting //Question 2 var foo = 5 console.log('foo:', foo) var foo; var bar = 10; var bar; console.log('bar:', bar) var baz = 10 var baz = 12 console.log('baz:', baz) Hint: Basics of hoisting //Question 3 function foo() { function bar() { return 5 } return bar() function bar() { return 10 } } console.log(foo()); Hint: Think what happens if two functions wit…

Javascript Interview Question and Answer - 1

In this article we are going to discuss 2 javascript interview question and their answers.These questions are highly asked in the Javascript interviews.

Disclaimer: - You might have different solution working with all test cases for both the problems.

So lets discuss the first question.This question is to test your ability in terms javascript object knowledge and your logical thinking.

Q1. You have been given a nested object "Person" which has one of the property as "password".Write a generic function to change the value of all the "password" property to "*****". Object is nested and may contain other object with property "password" and so on. Here is a sample object.

var Person = {
     name: 'Alex',
     age : 40,
    password : 'abc',
    x : {
       name : 'Chris',
       password: 'abcd',
       y : {
          name : 'Mike',
          password: 'abcd',
         },
     }
.
.
}

Before we …