How To Install Angular-4 And Run Your First Angular 4 App

In this tutorial we will learn how to install angular-4 and create angular 4 app. we will understand project structure and files with explanation and why it is needed for your angular-4 application.

Here we start from installation of angular4. Angular4 installation needed nodejs platform using npm we can install angular 4/5. So we will start from check nodejs version on our machine using below command.

Check Nodejs Version For Angular4 Installation

Your path>node –v

Angular 4 Installation

After run above command you can get node version. Now you can install angular 4. Please type below command on your command prompt.

Your path>npm install –g @angular/cli

In above command –g used for install angular/cli as globally in your machine that means you can create your angular project anywhere and run from anywhere else. If you don’t type –g at the time of installation it means angular installed into your current folder and it will not accessible from anywhere else.

After run above command your angular 4 installed in your machine. Ensure your Angular 4 CLI installed or not for that go to command line and run below command.

>ng –v
You will see ANGULAR CLI 
Angular/cli: 1.3.0
Node 6.11.2

Angular4 Project Creation

Now we can create new angular project using following command:

 Your path>ng new [your project name] 
 your path>ng new loginapp

After that your angular4 project created by using Angular/cli. You will see look like below result after creation of angular project.

  create loginapp/e2e/app.e2e-spec.ts (290 bytes)
  create loginapp/e2e/app.po.ts (208 bytes)
  create loginapp/e2e/tsconfig.e2e.json (235 bytes)
  create loginapp/karma.conf.js (923 bytes)
  create loginapp/package.json (1313 bytes)
  create loginapp/protractor.conf.js (722 bytes)
  create loginapp/ (1024 bytes)
  create loginapp/tsconfig.json (363 bytes)
  create loginapp/tslint.json (2985 bytes)
  create loginapp/.angular-cli.json (1243 bytes)
  create loginapp/.editorconfig (245 bytes)
  create loginapp/.gitignore (516 bytes)
  create loginapp/src/assets/.gitkeep (0 bytes)
  create loginapp/src/environments/ (51 bytes)
  create loginapp/src/environments/environment.ts (387 bytes)
  create loginapp/src/favicon.ico (5430 bytes)
  create loginapp/src/index.html (295 bytes)
  create loginapp/src/main.ts (370 bytes)
  create loginapp/src/polyfills.ts (2667 bytes)
  create loginapp/src/styles.css (80 bytes)
  create loginapp/src/test.ts (1085 bytes)
  create loginapp/src/ (211 bytes)
  create loginapp/src/tsconfig.spec.json (304 bytes)
  create loginapp/src/typings.d.ts (104 bytes)
  create loginapp/src/app/app.module.ts (316 bytes)
  create loginapp/src/app/app.component.html (1139 bytes)
  create loginapp/src/app/app.component.spec.ts (986 bytes)
  create loginapp/src/app/app.component.ts (207 bytes)
  create loginapp/src/app/app.component.css (0 bytes)
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'loginapp' successfully created.

Now your project is successfully created and also load all dependencies and needed library.
Now we will change project directory for run ng app using below command.

Run Angular4 Application

>cd loginapp
loginapp>ng serve

Above ng serve command will run angular 4 project on your host server in local environment it will use port 4200 and run on http://localhost:4200/ . And you will see in your command prompt something like:

Date: 2017-12-11T11:38:36.075Z
Hash: ac15f544c
Time: 10105ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 21 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 555 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 33.9 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.14 MB [initial] [rendered]

Above you can see main.bundle.js it’s a generated bundles for JavaScript files and styles.bundle.js it’s a generated bundles for css files.

Now got to the your browser and type http://localhost:4200/ then angular app home page will be appear it means your app is successfully up n run on your machine or server.

Application Directory and Files Explanation

Inside your project directory following folders are there e2e, node_modules, src, app, assets, environments.

e2e folder : is responsible for end to end testing.

node_modules folder : carry all third party library and dependencies which will need to run our project.

src folder : In this folder you can find app, assets and environment folder.

app folder : app module and components are available. Every application has one module and one component by default if you need you can create according to your need.

assets folder : For store common css and js files for structured way of projects.

environment folder : Inside this folder you can find environment.ts for dev/test environment and for production environment.

Inside src folder following files also there.

Index.html : Inside this dynamic web pages will be display inside this we will talk about later.

main.ts : In angular application will start from this file it is like main method to run your app. In this file you can set your environment like production or testing or developing.

Polyfills.js : it is responsible to fill the gap between JavaScript new features and angular need and featured supported at the current browser set platform for run angular on browser if needed so in this file we can add those JavaScript new features. Because angular is using JavaScript features and functions.

styles.css : here you can write common/global styles css for your project.

test.ts : It is used for setup our testing environment.

Outside the src folder in our root folder following files are there which is basically related to configurations of project and testing and typescript

.angular-cli.json : this file have all project configuration.

.editorconfig : this file used to when we are working on same project then make sure all are have same configuration.

.gitignore : When you are working with GIT then you have to know about that otherwise no need.

Karma.conf.js : It is a test runner for JavaScript code. Karma is a configuration file. We will talk about later.

Package.json : Inside package.json file there is some declaration and settings of project and versioning and added dependencies list. And also dev dependencies also there like karma and angular library which we needed.

Protector.conf.js : This is responsible for end to end testing of our complete project.

Tsconfig.json : It has bunch of setting for typescript compiler. This config file convert typescript code file to JavaScript file for readability for browser because browser can’t understand typescript directly and also not able to run typescript code. This tsconfig.json at the compile time on JavaScript for our browser can understand. Like “target”:”es5”. If your project need some changes so you can change type script complier setting according to project requirement.

Thank you for reading this article fell for to ask in below comment area.