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.
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
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:
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 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.
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:
You can run many commands once you download Angular CLI, such as:
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.
You can use Angular CLI to create your first Angular project by executing the below command in your command line interface:
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.
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 *
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/
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:
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!
Research & References of How to set up local environment for Angular 9|A&C Accounting And Tax Services
Source
0 Comments