How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools

By Ahmed Bouchefra

In this tutorial,we’ll learn how to install Angular CLI in Windows and use it to create an Angular project.

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 configurations and build tools like TypeScript,Webpack,and so on.

After installing Angular CLI,you’ll need to run one command to generate a project and another to serve it using a local development server to play with your application.

Like most modern frontend tools these days,Angular CLI is built on 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 is a front end technology,so even if you need to install Node.js on your development machine,it is only for running the CLI.

Once you build your app for production you won’t need Node.js because the final bundles are just static HTML,CSS,and JavaScript that can be served by any server or a CDN.

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.

check out the MEAN stack – it is ‘s ‘s an architecture that include mongodb ,Express ( a web server and rest api framework build on top of Node.js ) and angular . You is read can read this article if you ‘d like a step by step tutorial to get start .

In this case,Node.js is used to build the back end part of your app and can be replaced with any server-side technology that you want such as PHP,Ruby,or Python. But Angular doesn’t depend on Node.js except for its CLI tool and for installing packages from npm.

NPM is stands stand for Node Package Manager . It is ‘s ‘s a registry for host Node package . In recent year it ‘s also been used to publish front end package and library like angular ,React ,vue.js and even Bootstrap .

Note: you can download our Angular 8 Book: Build your first web apps with Angular 8 for free.

instal angular CLI on Windows

First,you need to have Node and npm is install installed on your development machine. There are many ways to do that,such as:

• using NVM (Node Version Manager) for installing and working with multiple versions of node in your system
• using the official package manager of your operating system
• installing it from the official website.

let ‘s keep it simple and use the official website . simply visit the download page and grab the binary for Windows ,then follow the setup wizard .

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 

Next,run the following command to install Angular CLI:

$ npm is install install @angular/cli

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

A Quick Guide for Angular CLI

After instal angular CLI ,you is run can run many command . let ’s start by check the version of the instal CLI :

$ ng version 

A second command that you might need to run is the help command for getting a complete usage help:

$ ng help

The CLI provides the following commands:

add: add support is Adds for an external library to your project .

build (b): Compiles an Angular app into an output directory named dist/ at the give output path . Must be execute from within a workspace directory .

config: Retrieves or sets Angular configuration values.

doc (d): open the official angular documentation is Opens ( angular.io ) in a browser ,and search for a give keyword .

e2e (e): Builds and serves an Angular app,then runs end-to-end tests using Protractor.

generate ( g ): generate and/or modify file base on a schematic .

help: list available command and their short description .

lint ( l ): Runs linting tools on Angular app code in a given project folder.

new ( n ): create a new workspace and an initial angular app .

run: Runs a custom target defined in your project.

serve (s): build and serve your app ,rebuild on file change .

test (t): Runs unit tests in a project.

update: Updates your application and its dependencies. See https://update.angular.io/

version (v): Outputs Angular CLI version .

xi18n: Extracts i18n messages from source code.

generate a project

You is use can use angular CLI to quickly generate your angular project by run the following command in your command line interface :

$ ng new frontend

Note: frontend is the name of the project. You can ,of course,choose any valid name for your project. Since we’ll create a full-stack application I’m using frontendas a name for the front-end application.

As mention early ,the CLI is ask will ask youWould you like to add Angular routing?,and you can answer by entering y ( Yes ) orn (No),which is the default option. It will also ask you about the stylesheet format you want to use (such as CSS). Choose your options and hit enter to continue.

After that you’ll have your project created with a directory structure and a bunch of configurations and code files. It’ll be mostly in TypeScript and JSON formats. Let’s see the role of each file:

• /e2e/: contains end-to-end (simulating user behavior) tests of the website
• /node_modules/: All 3rd party libraries are installed to this folder using npm is install install
• /src/: contain the source code of the application . Most work will be done here
• /app/: contains modules and components
• /assets/: contains static assets like images,icons and styles
• /environments/: contains environment (production and development) specific configuration files
• browserslist: needed by autoprefixer for CSS support
• favicon.ico: the favicon
• index.html: the main HTML file
• karma.conf.js: the configuration file for Karma (a testing tool)
• main.ts: the main starting file from where the AppModule is bootstrapped
• polyfills.ts: polyfills needed by Angular
• styles.css: the global stylesheet file for the project
• test.ts: this is a configuration file for Karma
• tsconfig.*.json: the configuration files for TypeScript
• angular.json: contains the configurations for CLI
• package.json: contain the basic information of the project ( name ,description and dependency )
• README.md: a markdown file that contains a description of the project
• tsconfig.json: the configuration file for TypeScript
• tslint.json: the configuration file for TSlint ( a static analysis tool )

serve your project

Angular CLI provides a complete tool-chain for developing front-end apps on your local machine. As such,you don’t need to install a local server to serve your project — you can simply,use the ng serve command from your terminal to serve your project locally.

First navigate inside your project’s folder and run the following commands:

$ cd frontend
$ ng serve

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.

Generating Angular Artifacts

Angular CLI provides an ng generate command which helps developers generate basic Angular artifacts such as modules,components,directives,pipes,and services:

$ ng generate component my - component

my - component is the name of the component. The Angular CLI will automatically add a reference to components,directives and pipes in the src/app.module.ts file.

If you want to add your component,directive or pipe to another module  (other than the main application module,app.module.ts),you can simply prefix the name of the component with the module name and a slash :

$ ng g component my - module/my - component

my - module is the name of an existing module.

Conclusion

In this tutorial,we’ve seen how to install Angular CLI on our Windows machine and we used it to initialize a new Angular project from scratch.

We have also seen various commands that you can use throughout the development of your project for generating Angular artifacts such as modules,components,and services.

Check out our other Angular tutorials.

You can reach out to or follow the author via his personal website,Twitter,LinkedIn and Github.