Angular Environment Setup Tutorial

Development Environment

A development environment is simply the the technology stack that we develop Angular applications in. A tech stack typically consists of the language you’re coding in, the framework (like Angular), an IDE, and directories on the development computer.

Our Angular development environment will consist of the following.

• As our IDE, we will use a free one called Visual Studio Code.
• Our runtime environment will be Node.js. NodeJS also includes the npm package manager that installs and manages dependencies like Angular.
• The Angular framework, installed via the Node npm package manager.

Setup Visual Studio Code for Angular

As previously mentioned, we will use Visual Studio Code for our IDE.

1. Download the VSCode installer from the official website.
2. Once the download has finished, Run the downloaded installer and follow the prompts.

Installation is fairly straight forward but the official documentation provides installation guides for Windows , macOS and several Linux variants.

Visual Studio Code also allows us to download and install extensions for Angular, Node etc. that help with development.

We won’t install any at this time, but you can find them from the online marketplace or directly from inside VSCode.

Setup Node.js for Angular

Node.js is a cross-platform Javascript runtime environment and allows us to execute server-side Javascript.

We will only use Node.js to install and manage the Angular dependencies with npm (node package manager), which comes bundled with Node.js.

1. Download the Node.js installer from the official website.
   It doesn’t matter if you choose the LTS (Long Term Support) version, or the latest version. We will only be using npm.
2. Once the download has finished, Run the downloaded installer and follow the prompts.

Setup Angular

To set up Angular on our system, we will use the Angular CLI (Command Line Interface), that runs in our terminal/command prompt.

The CLI is the recommended way of Angular projects because the Angular project workflow is a little more elaborate.

There are some files that need to be converted before they can run in the browser. The CLI does all of that, as well as heavily optimizing our code so that we can deploy highly optimized apps.

Windows:

Click on Start / Windows button and type cmd . Once the Command Prompt app shows, right-click on it and select Run as administrator.

Mac:

Open Applications > Utilities and double-click on Terminal.

Linux:

Press Ctrl Alt T to open the terminal.

Now that we have our command line ready, we can run the following command to install Angular.

npm install -g @angular/cli@latest

Mac and Linux users will need to add sudo in front of the command for administrator privileges.

sudo npm install -g @angular/cli@latest

There are two things to note about the command above.

1. The -g flag will install Angular globally. That means it will be globally available on the system and we will be able to use it any project.
2. @latest is optional.

During the installation, you may be asked the following question(s).

• Would you like to share anonymous usage data with the Angular Team?

We chose no, but if you want you can choose to send usage data.

Press Enter and let the setup complete. When it does, you should see output similar to the following.

+ @angular/cli@11.0.4
added 254 packages from 201 contributors in 470.509s

Workspace

Now that everything has been installed, we can set up our workspace for the project we’ll use to learn throughout this course.

1. First, let’s give our project a place to live. For this course we’ll create a folder on the desktop called “Angular-Projects”.

We will use the terminal/command prompt here, but you can create this folder with your operating system’s GUI.

Navigate to the desktop on your system with the cd (change directory) command.

cd C:/Users/<username>/Desktop

cd /home/<username>/Desktop

Replace /<username>/ with your username. For example: /Users/John/Desktop .

Create the directory with the mkdir (make directory) command, followed by the name of the folder.

mkdir Angular-Projects

Then cd into it.

cd Angular-Projects

2. Next, we will create a project with the ng new command from the Angular CLI and call it “my-app”.

ng new my-app

We cannot use “test” as a name for the project because it’s a reserved word in Angular.

Depending on your Angular version, you may be asked one or more of the following questions.

• Do you want to enforce stricter type checking?
• Would you like to add Angular routing?
• Which stylesheet format would you like to use?

We chose the following:

• yes
• no
• CSS

As you become more comfortable with Angular, you can change these options, like using SCSS for your stylesheet format.

Angular will now create a /my-app/ folder and initialize the project with all its files and dependencies inside of it.

Angular Development Server

Angular allows us to run a development server on our system that will watch for any changes in our app and reload the project in the browser automatically so we can see those changes immediately.

To do this, we use the ng serve command while inside the /my-app/ folder.

We can do it from the terminal/command prompt or from inside an IDE like Visual Studio Code.

Let’s open the project in Visual Studio Code.

1. Open Visual Studio Code
2. Go to File > Open Folder
3. Navigate to <username>/Desktop/Angular-Projects/my-app/ and choose Select Folder .

Don’t worry about all the files in the Explorer pane at the moment. What we want to do is open the built-in terminal.

1. Go to Terminal > New Terminal or View > Terminal to open the terminal in the bottom pane.
2. Run the following command and press Enter .

ng serve

Angular will generate and compile the application bundle and start the development server.

The dev server will be available at http://localhost:4200/ by default. If it’s not, the console will tell you the address.

...
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

√ Compiled successfully.
...

We can open http://localhost:4200/ in the browser to see our app.

If the dev server fails and you receive an error message, it could be that the address is already in use. Simply change the host address to a different one by using the --host flag along with the command.

ng serve --host localhost:4107

If you want to stop the dev server at any time, you can simply press Ctrl C , or exit out of the terminal/command prompt.

That’s it, we’re all set up and ready to build our own awesome Angular app.