Setup Angular development environment in the local system

This article explains the basic things about Angular and Angular CLI, set up the Angular development environment in the local system, and create the first angular project using Angular CLI.

Before proceeding with the setup of Angular let us see what is AngularJS, Angular, and Angular CLI and the advantages of both. The below table explains the differences between AngularJS and Angular

AngularJS	Angular
1. It's a javascript framework that applies with the HTML to converts the static website to dynamic	It's a development platform builds on Typescript.
2. It's somewhat difficult to develop web applications because we have to do it manually for setup, coding, etc...	It's very easy to set up and develop web applications through the default functions and libraries that have.
3. There is no specific tool for development but many IDE's available in the market.	Angular provides a specific tool called Angular CLI that makes the development easy.

Angular

Angular is an open-source and free framework that builds on the typescript. It is developed by the Angular team of google and it's a complete rewrite of AngularJS.

Angular includes a component-based framework and the collections of libraries like routing, form management, the communication between client-server and more, and the specific tool Angular CLI

Advantages of Angular

1. It's easy to scalable from single developer projects to enterprise-level applications.
2. Update easily with less effort.
3. It includes many developers, library creators, and content creators.
4. CLI - Command Line Interface tool that makes the development easy.

Angular CLI

Angular CLI is a Command Line Interface tool that is the fastest and easiest tool to develop angular applications. It reduces the more coding part.

Benefits of using Angular CLI

1. Angular CLI creates the boilerplate code for angular features like components, directives, pipes, services, etc.
2. It creates the boilerplate code for the features of Typescript like classes, interfaces, enums, etc.
3. Angular CLI follows the angular best practices and conventions to create applications.
4. It has the testing features like unit test and Ends to End (e2e) tests.
5. Angular CLI can generate the production build for deployment.

How to set up Angular development environment in the local system

For developing angular applications we should know Javascript, HTML, CSS, and TypeScript but setting up the developer environment doesn't require it.

The below steps describes the setup of the Angular development environment.

1. Install Node.js in your local system.
2. Install npm packages
3. Install Angular CLI.

Install Nodes.js

If you are using Windows System then please go to this URL https://nodejs.org/en/ and download node.js based on the type of windows and install it. Once you installed then check the version by typing node -v in the command prompt.

Install npm packages

npm is the world's largest software registry. Most of the open-source developers and organizations share their packages in this registry. We need an npm package manager to download and install npm packages.

Actually, by default, the node.js is installed with the npm package manager called npm client that helps to download and install the packages of npm. The command for installing the npm packages is "npm install". Type npm -v in the command prompt to check whether the npm is installed or not.

Install Angular CLI

Use this below command to install Angular CLI globally.

npm install -g @angular/cli

once the Angular CLI installation is successful then use the ng v (or) ng --version command to check the version of Angular CLI. The setup of the angular development environment has finished. Now we create the first angular project and test it.

Note: If you are facing any issue while installing Angular CLI then follow the below steps to fix it.

1. Delete the "npm" folder from the system path "c:\users\your_username\AppData\Roaming\". By default this folder is hidden so please make sure that the option "show hidden files and folders" is turned on.
2. uninstall and reinstall the node.js.
3. Again reinstall the Angular CLI through "npm install -g @angular/cli".

Create the First Angular Project using Angular CLI

First, we have to create the workspace and create the initial angular application. To create a workspace, open the command prompt and run this CLI command ng new first-app. This command creates the first angular project in the location you chose.

For example, if you choose the folder named angular-proj then your angular first application is created inside the folder named as first-app. If you are using the latest version of Angular CLI then it asks two questions while you run the command ng new first-app.

The first question will be like would you like to add Angular routing?. You have to answer this question, if you want routing then type y and enter. If you don't want then type n and enter. If you type y then the angular routing module is automatically created in the project.

The second question will be which style sheet format would you like to use?. You have to choose the format of the style sheet from the list like CSS or SASS. The project is created successfully once you answered the questions.

The below things will be created in the project once we run the ng new command successfully.

1. The new folder will be created in the specified path within that all the required configurations and source files are created.
2. All the npm packages are installed in the node_modules folder.
3. Unit test runner and karma are configured for Unit testing.
4. End to end test framework protractor configured of end-to-end testing.
5. By default, the server runs on port 4200.
6. By default, the live reload option is turned on. So the server watches the changes and rebuilds the application, and refreshes the browser.

This command ng new first-app creates the initial application and installs all the npm packages and other dependencies that are mentioned in the dependencies section in the package.json file.

Now we have to run the angular first application and test it. For that go to the workspace folder in the command prompt and run the below CLI command. Here our workspace folder looks like angular-proj\first-app so the command looks like

cd angular-proj\first-app
ng serve --open

The command ng serve --open (or) ng serve -o started the server and the server watches all the changes of files and rebuilds the app and opens the application in the URL http://localhost:4200/ automatically. You see the below screen once the server started successfully.

Now we can do the Unit testing and end-to-end testing. For doing a unit test run the ng test in the command prompt. It builds the application and runs all the unit tests and produces the results. The results are shown in the command prompt window and the browser window.

For doing an end-to-end test run ng e2e in the command prompt. It builds the application and runs all the e2e tests and produces the testing results.

I hope you understood how to set up the Angular development environment in the local system and how to create the first angular app using Angular CLI. In the next article let us see all the commands of Angular CLI and usage of that. Thanks!. Keep Reading!.