Angular - Development Environment Setup

Learn how to set up an Angular development environment, including installing Node.js and the Angular CLI, creating a new project, and running the development server. With this tutorial, you'll be able to start building Angular applications in no time.

To work with Angular (any version), you will need to install a few applications on your computer:

• Setup a Node.js development environment with npm (node package manager)
• Setup the Angular CLI (command-line interface)
• Setup an Editor/IDE

The Reason Why Angular Needs node.js

Node.js is a server-side backend, which makes it important but not mandatory for AngularJS. However, you will need node.js for the following purposes:

• npm is a package manager that comes with node.js by default; it allows you to manage your project dependencies. Therefore, you do not have to manually add dependencies, remove some, and update your package. Most Angular libraries are assigned as different NPM packages.
• npm provides the Angular CLI (command-line interface), a great tool for building Angular applications efficiently.
• TypeScript is a primary language for building angular applications, which is not supported directly by web browsers. To compile them in JavaScript, node.js is required.
• Angular works on the client side, while on the server side, you will need a node.js server environment for processing.

node.js Development Environment Setup

To get the best development experience, and if you do not yet have the node pre-installed on your System: Please go to the download page of the nodej.org website and install the latest version of the node. To check whether 'Node.js' is already installed in your system, you need to type the node -v command in your terminal prompt. This will immediately show you the Node.js version installed on your system. Furthermore, to check the Node Package Manager, you can use the npm -v command in your terminal prompt.

What is Angular CLI?

The Angular CLI (command-line interface) is a great tool to efficiently build Angular applications by automating operations in Angular projects rather than manually.

Angular CLI (command-line interface) Setup

If you have installed node.js on your system, the next step is to install Angular CLI by using the following command:

npm install -g @angular/cli

Here in the above command, -g is used for global installation. If you write this, you can use the CLI directly in any Angular project on your system.

Type the ng version or ng v command at your terminal prompt to verify your angular version.

Create a New Angular Project

After installing Angular CLI, you can now use it to create a new Angular project using the following command:

ng new my-app

The above command creates a new angular project(my-app) with all the required dependencies. Replace my-app with the desired name for your project. This will create a new directory with the same name and initialize it as an Angular project.

Navigate to the project directory:

cd my-app

Run the development server:

ng serve

This will compile and serve the application and will be available at http://localhost:4200/. The development server will also automatically reload the application whenever you make changes to the code.

That's it! You now have a working Angular development environment. You can start building your application by modifying the files in the src directory.

To build a production version of your application, run the following command:

ng build --prod

The code above will create a production-ready build of your application in the dist directory.