How to install and setup new Angular project from the 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.
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.
sudo apt-get install npm
You can also check npm version with command:
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,
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
Angular CLI: 12.1.3
Package Manager: npm 6.14.13
OS: linux x64
@angular-devkit/architect 0.1201.3 (cli-only)
@angular-devkit/core 12.1.3 (cli-only)
@angular-devkit/schematics 12.1.3 (cli-only)
@schematics/angular 12.1.3 (cli-only)
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.
SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org
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.
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.
Copyright 2023 HackTheStuff