Angular Installation Guide - 3 Steps (Mac, Windows, Linux)
Angular Installation Guide - 3 Steps (Mac, Windows, Linux)

Here is a simple Angular installation guide which is suitable for Windows, Mac and Linux. 2 most important angular tools are nodejs and angular-cli. But 1 important point here is to install the correct version of nodejs. You will also see how to do proper angular cli project setup and prepare the generated project for future use.

First this that you need is to install node on your machine. I already have it but if you don't just go to https://nodejs.org and download it there. I always recommend to take LTS version which means "Long term support". To check that your node is available and is correctly install just write in console

node --version

If you can some number then it's fine. For Angular you node version should be between "node": ">=10.13.0 <13.0.0". How do I know this? It's not written somewhere so the best place to check it is in package.json inside angular-cli.

And now the question is "What is angular-cli" and why do we need it. So angular-cli as a part of Angular which helps us to work with it from command line. So we can create new angular project, generate components and do a lot of other stuff.

This is the first this that we need to install. Let's just in Angular cli website so you can see where it's coming from.

First of all we need to install angular-cli globally.

npm install -g @angular/cli

Now we can you ng in console to generate a project. Let's create our project

ng new angular-for-beginners

at this moment angular-cli will create a project and download all dependencies for it. To start our project we need to go in the folder and run

ng serve

Now in browser on localhost:4200 we can see our generated project.

Now let's have a look of the fine structure of our project to at least understand how this generated page is rendered. The most interesting folder for us is src/app. We are interested now in app.component.html. As you can see inside we have almost normal html. Let's remove everything and just write

<h1>Hello Angular</h1>

As you can see in browser our page is automatically reloaded and we need the changes that we make. This means that our project is working and we are prepared for writing the code.

Now you know how install Angular on your machine but there are 2 more tools that are optional but I highly recommend them for writing code. They are prettier for code formatting and language server protocol for autocomplete, autoimport and other typescript support.

If angular for beginners is too easy for you or you want more advanced stuff check my 14 hours Angular course where we create a real project from beginning to the end. Link is also in the description.

📚 Source code of what we've done