Set Up Angular Project From Scratch

Angular is open-source web application framework written in Typescript by Angular team in Google. Angular is commonly used for single page web application. It uses  Typescript core library and builds application using HTML and CSS.

In this article, we are going to setup and create new Angular application. So first let's start with Nodejs.

Install Node.js

Angular requires LTS version of Node.js to install Angular application and its component. So first We start from installing Node.js. If you direct try to install Node.js with apt command, it will install Nodejs version 10.X which is not compitible for Angular. So first you need to change Node.js version. Run the below curl command to get nodesource_setup.sh script file.

curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh

sudo bash nodesource_setup.sh

Now try to install Node.js with apt command. This will install latest Node.js version.

sudo apt-get install -y nodejs

Verify that Node.js is correctly installed. Run the below command and it will output the installed version.

nodejs --version

Install npm

We will also need npm, Javascript runtime environment for Node.js. npm will install all package that you will need for Angular. Install npm with below command.

sudo apt-get install npm

You can also check npm version with command:

npm --version

Angular CLI

After you installed npm, you will need to install Angular CLI. Angular CLI will used to create Angular project, bundle, testing and creating component etc. Run the below npm command and it will install angular-cli tool. You might need to run command with sudo permission otherwise it will return permission error.

sudo npm install -g @angular/cli

If everything goes ok, then we can run all angular commands using ng word. For example, to check angular-cli version,

ng --version

Create Angular project

Now you have installed everything that you need to run Angular application. So create new Angular project with ng command.

ng new awesome-app

This will first ask to add routing module in app. Give y and hit Enter key.

Again it will ask which to choose between CSS or other styling format. Just press Enter for CSS.

This will create awesome-app application folder. To run the Angular project run the below commands one by one. 

cd awesome-app
ng serve --open

This command will build the Angular application. --open flag will automatically open project URL http://localhost:4200 in default browser.

Conclusion

So far in this article, we have learned how you can install and create new Angular application from the scratch. In the upcoming articles, we will drive deep in Angular articles.

Author : Harsukh Makwana