Yogesh Chauhan's Blog

How to set up the local environment and workspace for Angular development?

in Angular on May 9, 2020

In this article, I'm going to show you how to set up your environment for Angular development using the command-line interface.

If you want to get the grasp of Angular then you should know the following:

1. JavaScript

2. HTML

3. CSS

If you know Typescript, it's better to understand some concept but it's not required. 

Let's set up the environment by installing the components one by one.

Requirements

Requirement 1: Node.js

Make sure your development environment includes Node.js and an npm package manager.

Angular requires a current, active LTS, or maintenance LTS version of Node.js. 

To check your version, run node -v in a terminal/console window.

To get Node.js, go to nodejs.org.

Requirement 2: npm package manager

Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages.

To download and install npm packages, you must have an npm package manager. npm client command line interface is installed with Node.js by default.

To check that you have the npm client installed, run npm -v in a terminal/console window.

One you have those 2 required components, then you can go ahead and start with step 1 of installation.

Installation

Step 1: Install the Angular CLI

We use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

We need to install the Angular CLI globally.

To install the CLI using npm, open a terminal/console window and enter the following command:


npm install -g @angular/cli

Step 2: Create a workspace and initial application

We develop apps in the context of a workspace, which is called Angular workspace.

To create a new workspace and initial starter app:

1. Run the CLI command ng new and provide the name my-app, as shown here:


ng new my-app

//you can use any name you want

2. The ng new command might ask you for information about features to include in the initial app. You can just accept the default options as per now. To do that, just press the return key (MAC users) or enter key (Windows/Linux users).

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. Probably 5-10 minutes.

The CLI creates a new workspace and a simple Welcome app, ready to run.

Step 3: Run the application

The Angular CLI includes a server, so that you can easily build and serve your app locally.

1. Go to the workspace folder (my-app).

When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root-level application named my-project. The workspace root folder contains various support and configuration files, and a README file with generated descriptive text that you can customize.

If you're not sure where your project folder is located. Just go to your C drive (Windows users) and you'll see the folder named my-app.

For MAC users, it's located inside your admin user's root directory.

2. Launch the server by using the CLI command ng serve, with the –open option.


cd my-app
ng serve --open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

The –open (or just -o) option automatically opens your browser to http://localhost:4200/.

You will see this window open automatically. (It doesn't have to be a guest window.)

Angular local dev environment
Angular local dev environment

Credit: Angular.io


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
WordPress: How to access first and random row values from a repeater field in ACF?WordPressSolution for Xcode 11 Command PhaseScriptExecution failed with a nonzero exit code errorMiscellaneousSteps to Secure a VPNMiscellaneousAggregate Functions Examples in Postgres for BeginnersPostgresA complete guide to add responsive YouTube videos using HTML and CSSCSSIntroduction to Angular modules Part 2: NgModules and componentsAngular