How to Install and Set up Angular 11 on macOS X

Angular is a JavaScript open-source framework that helps in developing single-page web applications suitable for web/mobile/desktop. Angular comes with built-in TypeScript support. Here we will learn the steps to install Angular 11 on a macOS X system.

Angular combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or desktop.

Let us quickly jump into the installation steps.

Prerequisites

To continue with this article, the reader must know the basics of working with the Terminal in a macOS system.

What we will learn?

After completing this article, we will learn:-

  • Install Node.js on a macOS system
  • Installing the Angular CLI.
  • Creating a new Angular application
  • Running the Angular app we created

Install Nodejs

In this tutorial, we are going to install Angular 11 using the Node Package Manager(NPM). First, install Nodejs on our system. NPM will be installed with Nodejs itself.

We can download and install Nodejs from the official website. Currently, 16.13.0 is the stable version of Nodejs and it can download and install on our system using the URL below.

 https://nodejs.org/en/download/current/ 

From the page, select the macOS installer option and download the pkg file. Now install it on our system.

Install Angular CLI

Angular CLI helps us to create projects, generate application and library code.

It can simply be installed using NPM. Open Terminal and install the Angular CLI with the below command.

npm install -g @angular/cli

Creating a New Angular Application

We successfully installed Angular CLI on our system and now we can set up a workspace for Angular projects in our system and create a new app. This can be done with the below command.

ng new awesome-project

Running Our App

Now, the app we created can be run using ng serve command.

cd awesome-project
ng serve --open

This launches the server, watches our files, and rebuilds the app as we make changes to those files.

The –open (or just -o) option automatically opens our browser to the below address.

http://localhost:4200

Summary

Here in this article, we discussed the steps to install Angular 11 on a macOS system. Angular CLI made it easier to create new Angular projects.

Be the first to reply

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.