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:
Knowledge of TypeScript is helpful, but not essential.
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.
npm -v v5.6.0
Deploy the Angular CLI
Open the terminal and type below command with help of NPM to install angular CLI:
npm install -g @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:
$ cd ~/Dev/ (Go to your local directory Dev) $mkdirmyProject(Create myProject directory in dev folder) $cd myProject(navigating to myProject folder)
$ 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.
$ 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 *
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!
Your email address will not be published. Required fields are marked *