Setting up Angular with the CLI

Setting up Angular is a relatively simple process and if you follow the steps below you should be up and running in no time.

Prerequisites

To install Angular, you will first need to have Node JS installed.

https://nodejs.org/en/about/releases/

An active or maintenance version of Node will be needed (I use v14.18.0). To check that you have Node installed run the command node -v on the command line.

The other thing you need to install is the npm, node package manager.

https://docs.npmjs.com/about-npm

Angular relies on npm being installed to install all dependencies, to check that it has installed correctly run npm -v on the command line.

Install the CLI

The best way to create and manage Angular projects is via the command line interface (CLI). The CLI allows you to perform lots of task such as generation of application or library code as well as standard development activities like dev, test and prod tasks.

Install the CLI globally with the following command

npm install -g @angular/cli

Creating your first Angular application

Creating your first app in Angular is simple. Using the CLI you can run the command ng new and supply it with the application name in this example its example-app

ng new example-app

When this command is run you will be prompted to add some features. My favorite configuration is to add Routing and use the SCSS style sheets. This will then build and install of the needed dependencies.

Once the app is created you can now run the sample code that is built in by the CLI to run the app you must first move into the newly created directory.

cd example-app

Once you have moved into the newly created directory the application can now be hosted locally. This is known as serving the application.

ng serve

You can now open the demo application, this by default will be hosted behind port 4200 on your local machine.

Goto the browser and open http://localhost:4200/



Categories: Angular

Tags: , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: