DEV Community

Cover image for Angular: Installation
AxlBlaze
AxlBlaze

Posted on • Edited on

Angular: Installation

In this tutorial, we'll lean how to install Angular CLI in Window and use it to create an Angular project.

Alt Text

What is Angular CLI?

  • Angular CLI is the official tool for initializing and working with Angular projects. It saves you from the hassle of complex configuration.

  • After installing Angular CLI, you'll need to run one command to generate a project, you see about 400 files will be generated for the project and another to serve it using local development server to play with your application.

  • Like most modern front end tools these days, Angular CLI is built on the top of Node.js.

  • Node.js is a server technology that allows you to run JavaScript on the server and build server-side web applications. However, Angular s a front end technology, so even if you need to install Node.js on your development machine, it is only for running the CLI.

  • That being said, if you are building a full-stack web application with Angular, you may need Node.js for creating the back end part if you like to use JavaScript for the front end and back end.

  • NPM stands for Node Package Manager. It's a registry for hosting Node packages. In recent years it's also been used to publish front end packages and libraries like Angular, React, Vue.js and even Bootstrap.

Installing Angular CLI on Windows:-

i) Download and install the Node.js for running the CLI.

1.1. Click the link Download And download node according to your system requirements)

1.2. Install node.js.

1.3. You can make sure Node is installed on your system by running the following command in a command prompt which should display the installed version of Node:
>> Node -v

ii) Next, run the following command to install Angular CLI.

    >> npm install @angular/cli
Enter fullscreen mode Exit fullscreen mode

After the command finishes successfully, you should have Angular CLI installed.

iii) After installing Angular CLI, you can run many commands. Let’s start by checking the version of the installed CLI

    >> ng version
Enter fullscreen mode Exit fullscreen mode

Alt Text

Generating Project:-

i) You can use Angular CLI to quickly generate your Angular project by running the following command in your command line interface:

    >> ng new PROJECTNAME
Enter fullscreen mode Exit fullscreen mode

Alt Text

ii) Go to folder using cd command

    >> cd PROJECTNAME
Enter fullscreen mode Exit fullscreen mode

iii) Run Project- you can simply, use the ng serve command from your terminal to serve your project locally.

    >> ng serve 
Enter fullscreen mode Exit fullscreen mode

Alt Text

You can now navigate to the http://localhost:4200/ address to start playing with your front end application. The page will automatically live-reload if you change any source file.

Alt Text

Install Visual Studio Code IDE or JetBrains WebStorm

You must have an IDE like Visual Studio Code IDE or JetBrains WebStorm to run your Angular app.

VS Code is light and easy to setup, it has a great range of built-in code editing, formatting, and refactoring features. It is free to use. It also provides a huge number of extensions that will significantly increase your productivity.

You can download VS Code from here: https://code.visualstudio.com

JetBrains WebStorm is also a great IDE to develop Angular apps. It is fast, attractive, and very easy to use software but, it is not free to use. You have to purchase it later, it only provides a trial period of 30 days for free.

You can download Jetbrains Webstorm from here: https://www.jetbrains.com/webstorm/download/#section=windows

Next Topic : Angular File explanation

Top comments (0)