Angular CLI | How To Setup Angular Project

In this blog we will learn What is angular, what is typescript, what is transcompilation, Angular CLI, how can a beginner install Angular CLI in windows, how to create new project with various features add options, how to install node modules, how to host in localhost and understand where to add content in angular project.

Introduction of Technology Used in Angular

Learn about Angular:

It is a superset of JavaScript, known as TypeScript, it is based open-source web application framework under the guidance of the Angular Team at Google and by a community of individuals. Angular is developed by the same team who built AngularJS. It is front-end framework which make development not only easy but it also increase speed and performance. With such benefits it also gives compatibility across all platforms.

Typescript:

As we all know Angular is written using TypeScript language, and it is basically a superset for JavaScript. It fully compiles in to JavaScript, but it helps spot and eliminate common mistakes when human is actually typing the code. TypeScript was initially designed for development of large applications and for transcompiles to JavaScript.

What Is Transcompilation:

transcompiler, also called a source-to-source compiler or transpiler, is a special type of compiler that converts a program’s source code into another language. It can process not only latest version of a programming language, but also able to process code written in an older version of a programming language by converting it to a newer version of the same language.

Angular CLI:

The Angular CLI is a command-line interface tool, which gives support to use develop, initialize, deploy, update, scaffold, and maintain Angular applications directly from a command prompt.

Note: Please make sure you have node and NPM installed in your system.

You can check your node version and NPM version by using the following command:
node --version
npm --version
Angular CLI | How To Setup Angular Project | Check node and npm versions

Steps to create your first project using Angular CLI.

Step-1: Install Angular CLI
npm install - g @angular/cli

This command will install Angular CLI globally, In my case I have already installed, so it just checked for updates. Do not wary about WARN, it just shows that you don’t have additional file and details like description and README data.

Angular CLI | How To Setup Angular Project | Result of angular cli install command
Step-2: Create new project by this command
ng new myNewApp

While executing this command in your terminal, it will ask few feature if you want to add in your new Angular Application.

If you want to add routing module in your app type “Y” and press Enter.

Angular CLI | How To Setup Angular Project | Angular CLI asking for route module

Than it will ask about whether you want CSS or SCSS

Angular CLI | How To Setup Angular Project | Angular CLI asking for which css to be used in your project

Now wait few seconds, and installation will done.

Angular CLI | How To Setup Angular Project | Successfully created angular app
Step-3: Go to your project directory
cd myNewApp
Angular CLI | How To Setup Angular Project | Open directory in cmd
Step-4: Install node modules

In order to run application we have to install node modules, for that type following command in cmd

npm install OR npm i
Angular CLI | How To Setup Angular Project | Install node modules
Step-5: Run server and see your application in localhost

Here ng serve will host your application on http://localhost:4200 but if you want to host it on different port than add flag –port=4300, and –open flag will directly open your app in default browser of your computer, when angular cli will complete compilation process.

ng serve --open --port=4300
Angular CLI | How To Setup Angular Project | Application is served on localhost

After few seconds it will open browser, and there you will see your newly created project up and running.

Angular CLI | How To Setup Angular Project | Application opened in browser
Step-6: Add content in newly created app

Open file: “myNewApp/src/app/app.component.html” and replace with your own html in index file.

Here you can replace following code for test purpose

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>
<body>
   <h1>This is a Heading</h1>
   <p>This is a paragraph.</p>
</body>
</html>

As, you can see the result

Angular CLI | How To Setup Angular Project | Application in browser after content chaged

So, this is how we can install and host our project in localhost.

Some, more use full commands

ng generate component componentName OR ng g c componentName
ng generate service serviceName OR ng g s serviceName

Thank you for reading and stay tune, stay connected and stay safe. Read our other blogs on ITbulls.in

Previous Post
Next Post

Comments

Angular | Install Bootstrap in angular project - IT Bulls

[…] First of all create Angular new application, using angular CLI, you can check our blog on Angular | How To Setup Angular Project. […]

Leave a Reply

Your email address will not be published. Required fields are marked *