How to set up local environment for Angular 9

This article is a guide to building a solid atmosphere to facilitate the best Angular learning and work experience. Let us make sure that we have the best possible development experience and do not run into common issues with the development environment. Facing issues with the development environment is one of the biggest obstacles for someone new to the Angular ecosystem, perhaps even more so than the reactive concepts themselves. 

It is therefore crucial to get the environment correctly set up right from the start. The development environment must be easily upgradeable and create minimal issues over time due to things like semantic versioning. 

In this guide, I discuss how to set up your Angular Development environment using the Angular CLI method. I will talk about the prerequisites, how to install a CLI, how to build an initial workspace and starter app, and how to run the app locally to test your setup. 

Know more about angular cli.

Prerequisites 

You should be familiar with the following to use the Angular framework: 

HTML, CSS, JavaScript, Typescript 

Knowledge of TypeScript is helpful, but not essential. 

Development Environment 

• Node 
• NPM 
• Editor-Visual Studio Code 
• Angular CLI 

Setting up a Node Development Environment 

In this case, Node.js is used to create the backend of your app and can be replaced with any server-side technology you like, such as PHP, Ruby, or Python. However, Angular does not rely on Node.js, except for its CLI tool and for downloading NPM packages. 

To set up the best possible development experience, and if you do not have node yet installed: please visit the nodejs.org website and install the most recent version of node.  

Please make sure that you use the long-term support version (LTS) instead of the latest version.Open a browser, type https:/nodejs.org/en/download/, and click the Windows Installer button. You will seethe LTS displayed along with the current version of the node. Go ahead and download the recommended or current version of the node. 

We will be using node for frontend tooling purposes and for running our development server. For this specific purpose, you would be likely to run into fewer issues if you employed the latest version. However, if you already have node installed (any version), there is a far better way to upgrade your node version than to run an installer.Instead of overwriting your current version of node with the latest one, let us use a simple command line tool that easily allows switching node versions. 

There are several advantages to using the command line tool:  

• It is very useful to be able to quickly change node versions if, for example, there are multiple projects to be maintained on the same machine, and each project needs different node versions.  
• With this tool, it will be much easier to upgrade to newer versions of the node in the future – we will not have to run the installer again on your machine. 

So, let us make sure you have at least some version of the node installed on your machine before you start. To check your version, run node -v in a terminal/console window. 

NPM package manager 

NPM is the Node Package Manager. This is a list for hosting node packages. It has also been used in recent years to publish front end packages and libraries such as Angular, React, Vue.js and even Bootstrap. 

Angular, the Angular CLI, and Angular apps depend upon features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you need to have a npm package manager. The npm client command line interface is used to access NPM package manager which gets installed with node js. 

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

npm -v 
v5.6.0 

Install Angular CLI 

Angular CLI is the official resource for beginning and operating with Angular projects. It saves you from the mess of complicated configurations and builds resources like TypeScript, Webpack, and so on.  Like most modern frontend tools these days, Angular CLI is also built at the top of Node.js. Node.js is a server technology that allows you to run JavaScript on your server and build server-side web applications. However, Angular is the front-end code, so even if you need to install Node.js on your development computer, it would just be for running the CLI. 

When you create your production software, you won't need Node.js because the final bundles are static HTML, CSS, and JavaScript can be supported by any server or CDN. If you are building a full-stack web application with Angular, you may need Node.js to create the back end if you want to use JavaScript for the front end and back end. 

Deploy the Angular CLI  

Open the terminal and type below command with help of NPM to install angular CLI: 

npm install -g @angular/cli 

Some useful commands using angular CLI  

You can run many commands once you download Angular CLI, such as: 

1. To check version of CLI: $ ng version 
2. To add support to your project for an external library: $ng add 
3. To compile the Angular app in the output directory called dist.or in the output path defined; should be executed from inside a working space directory: $ng construct 
4. To retrieve or set Angular configuration values: $ng configure 
5. To open the official Angular Documentation (angular.io) in the browser and searches for a keyword: $ng doc 
6. To generate and/or change schematic-based files: $ng generate  
7. To list the commands available and their brief descriptions: $ng help  
8. To run lining tools on the Angular device code in the project folder: $ng lint 
9. To build a new workspace and an initial Angular app: $ng new  
10. To run a custom target set for your project: $ng run  
11. To develop and support your request, restore on file changes: $ng serve 

After you have installed Angular CLI, you will need to run one command to create a project and another to support it using a local development server to play with your program. 

Creating workspace and initialization of angular application: 

You can use Angular CLI to create your first Angular project by executing the below command in your command line interface: 

Step 1: Navigate to project directory 

$ cd ~/Dev/ (Go to your local directory Dev) 
$mkdirmyProject(Create myProject directory in dev folder) 
$cd myProject(navigating to myProject folder) 

Step 2: Creating an Angular app 

$ ng new helloworld 

The command ng new will prompt you to include default a feature in the initial request. Usethe Enter or Return key to acknowledge the defaults. 

Note: ‘Helloworld’ is the name of this project. Of course, you can select any appropriate name for your project. Because this is our initial set up, I'mgoing with‘hello world’ as a name for the front-end application. 

Step 3:Navigate to project and run local server 

$ cd /path/to/your/newly/created/app/ 
Like 
$ cd ~/Dev/myProject/helloworld/ 
$ ng serve –open 

That will launch http:/localhost:4200/  

* Note: ng serve command launches a server, searches for changes to your files, and rebuilds the software when you save changes * 

Step 4: Edit project 

Open file in dev/myproject/helloworld/src/app/app.component.ts: 

Edit the file and make some changes and save it. Changes will be highlighted:  

Within app root (app root is in /myproject/helloworld/ for our app,), Run: 

ng serve –open or just navigate tohttp:/localhost:4200/ . The web UI will reflect the changes. 

With ng serve still running, make and save a new change in app.component.ts:  

You will be surprised to see the changes automatically reflected in  http:/localhost:4200/  

Step 5:Build app and get ready for deployment 

$ng build 

This command creates a new folder in your app root named "/dist/" which is your entire package, compiled and ready for shipment. 

Nice Flags optional:  

• Prod this creates a version of your app ready for production  
• output-path /to / your / path/ this changes the default path to create your Angular files  
• output-hashing none remove additional hash on your file name

Conclusion

In this guide, we have gone through the steps to setting up a solid local environment to facilitate the best Angular learning and work experience. Following these steps, you will ensure that the development environment is easily upgradeable, minimizing the possibility of any issues arising over time due to things like semantic versioning. 

We have discussed how to set up your Angular Development environment using the Angular CLI method, the prerequisites necessary and walked through how to install a CLI, how to build an initial workspace and starter app, and how to run the app locally to test your setup. 

I hope this has been a useful guide and I wish you the very best Angular learning and work experience!