Prerequisite of Angular 9 By Sagar Jaybhay

April 07, 2020

In this blog series we will learn Angular 9 and this my first blog on Angular 9. So we start with what are Prerequisite of Angular 9 By Sagar Jaybhay.

Node

It is a javascript runtime. If you want to run javascript you need to run this inside the browser but by using Node you can run javascript outside the browser. To download node use this link https://nodejs.org/en/

The current version is 12.16.1 LTS to download this use this link:- https://nodejs.org/dist/v12.16.1/node-v12.16.1-x64.msi

To build node they use Chrome’s V8 JavaScript engine. And the Chrome engine is one of the best engines for JavaScript. It is a fully programming platform and in NODE we have Http component, file component, URL component and NPM for angular.

If we want to learn Angular 9 we required only NPM( Node Package Manager Commands).

How does the Node Package Manager work?

In the software industry, there are lots of package managers present like maven, nugget and currently npm. A package manager is a software which finds whatever package you required, installs that package on your local machine it also manages that package and if you want to uninstall it will remove that package from your system.

Right now there are lots of packages on the internet and if you want to go out and find that site install it on the machine is a little bit time-consuming task so package manager solves that problem you only need to fire command and it will find it and install it on your machine.

npm install jquery

In the above command, jquery is our package name.

In new angular, you will find different, different modules.

Angular CLI

Angular CLi is a command-line interface which will get everything you required to run angular. So how to install angular cli on machine use below command.

C:\Users\Sagar>npm install @angular/cli –g

Here g stands for install globally and you will get run angular anywhere from your machine.

Here current version of angular cli is 9.1.0

To learn angular cli commands visit this site https://cli.angular.io/ you will get all commands from here.

Now its time to create our application so we can use the below command to create the application.

D:\Target Dec-2019\angular 9.x>ng new customerapplication

Go to command prompt and run below command

ng serve –o

Default port run application is 4200 and our application runs on URL localhost:4200/

TypeScript

It is Open-source language and it is Typed SuperSet of JavaScript. For more learning on typescript, you can visit below link:- https://sagarjaybhay.net/category/typescript/

The folder structure of CLI projects:

Tslint.json: In this linting is the process of running a program that will analyze code for potential errors. The linting process is done by tslint.json file
Readme.md: this is a file where all commands are listed here you can delete these files.
Package.json: it is a node configuration file where you can register your dependencies here and when you use npm install command it will install all packages mentioned in a package JSON file. This package.json file belongs to a node and it is the node configuration file.


 "name": "customerapplication",
 "version": "0.0.0",
 "scripts": 
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
 ,
 "private": true,
 "dependencies": 
 "@angular/animations": "~9.1.0",
 "@angular/common": "~9.1.0",
 "@angular/compiler": "~9.1.0",
 "@angular/core": "~9.1.0",
 "@angular/forms": "~9.1.0",
 "@angular/platform-browser": "~9.1.0",
 "@angular/platform-browser-dynamic": "~9.1.0",
 "@angular/router": "~9.1.0",
 "rxjs": "~6.5.4",
 "tslib": "^1.10.0",
 "zone.js": "~0.10.2"
 ,
 "devDependencies": 
 "@angular-devkit/build-angular": "~0.901.0",
 "@angular/cli": "~9.1.0",
 "@angular/compiler-cli": "~9.1.0",
 "@angular/language-service": "~9.1.0",
 "@types/node": "^12.11.1",
 "@types/jasmine": "~3.5.0",
 "@types/jasminewd2": "~2.0.3",
 "codelyzer": "^5.1.2",
 "jasmine-core": "~3.5.0",
 "jasmine-spec-reporter": "~4.2.1",
 "karma": "~4.4.1",
 "karma-chrome-launcher": "~3.1.0",
 "karma-coverage-istanbul-reporter": "~2.1.0",
 "karma-jasmine": "~3.0.1",
 "karma-jasmine-html-reporter": "^1.4.2",
 "protractor": "~5.4.3",
 "ts-node": "~8.3.0",
 "tslint": "~6.1.0",
 "typescript": "~3.8.3"

Above is the package.json file if you see the above file it has dependencies and dev dependencies section. These dev dependencies are the things that are not going in production and it will use only the development phase.

Angular.json: this is a file used for the angular purpose
Tsconfig.json:- these are 2 files present inside the root which are tsconfig.json and other is tsconfig.app.json file. The second file tsconfig.app.json override the root config file
Polyfills.ts: this is not directly coming from angular and it is third party lib. It helps you to run a new ES version of Javascripts on an old browser which does not support new versions of JavaScipt.

GitHub Project Link: - https://github.com/Sagar-Jaybhay/angular9

Search This Blog

Sagar-Jaybhay