by In this tutorial, you will learn how to setup Angular 10 on your local machine. This applies to either Windows, Mac or Linux. The we also see how to create an initial workspace. Then we’ll test the installation by creating a simple app and running it locally. We would cover the following:
1. Get an IDE
You’ll need to get one of the free IDEs in order to run Angular. See below :
Get free IntelliJ IDEA from here
Get WebStorm from here though it’s not free
For me, I recommend either IntelliJ IDEA or Visual Studio Code(VS Code) because they are free and feature rich.
2. Install Node.js
You need Node.js to run Angular. Node.js is a runtime that allows you to run applications locally. Full Node.js tutorial is here. As shown below, simply choose the download for your OS and install.
After installing Node.js, you can test the installation. Use the command below:
node --version
If it displays your version of Node.js, then you are good to go.
3. Install Angular CLI
We need to install Angular CLI(Command Line Interface). This is what you use to interact with Angular. With the CLI, you can create new projects, and perform tasks such as testing your application, packaging and deployment as well.
To install Angular CLI, open the command prompt and run the following command:
npm install -g @angular/cli
This install the CLI and now we are ready. Also test the installation using the command below:
ng --version
If you get the output as shown below, then the installation was ok
4. Create Your First Angular App
Angular CLI makes it easy to set up your new application in a single command. Run the command below to create an app called Welcome.
ng new Welcome
This command creates a workspace for you. A workspace is a collection of items in a single repository. All the artefacts needed would be available in a folder called Welcome. Angular CLI installs the necessary npm packages and other dependencies.
Next, you can run the application by first navigating into the Welcome directory. Then issue the ng serve command. Run the following commands in order:
cd Welcome ng serve --open
You are prompted for some information. Just accept the defaults by hitting Enter.
The command launches the web server and rebuilds the app and servers it at port 4200. Also the –open option make it that your default browser is automatically opened. You’ll see the page below:
5. Next Steps
If you have come this far, congrats!
We would now take a look at the file and folder structure of the Angular Application. Also, we have been working in the command line. In the next part, we would open this application using an IDE.
