Angular is a popular open-source web application framework primarily maintained by Google and a community of developers. It is used for building dynamic, single-page web applications (SPAs) and progressive web applications (PWAs). Angular is written in TypeScript, a superset of JavaScript, and offers a comprehensive set of features for front-end development.
This tutorial will show you how to install Angular on Ubuntu 22.04.
Step 1 – Install Nodejs
Before starting, you will need to install Nodejs on your server. Follow the below steps to install the latest stable version of Nodejs.
First, create a directory to store the Nodejs GPG key.
mkdir -p /etc/apt/keyrings
Download the Nodejs GPG key to the above directory.
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
Add the Nodejs repository to the APT source file.
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_18.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
Update the repository index.
apt update
Finally, install the Nodejs using the following command:
apt install nodejs
After the installation, you can verify the Nodejs version using the following command:
node --version
Output:
v18.11.0
Step 2 – Install Angular CLI
Angular CLI is a powerful tool provided by the Angular team to streamline the development process of Angular applications. It offers a set of commands and tools that automate repetitive tasks and provide a structured workflow for creating, building, testing, and deploying Angular applications.
First, update NPM with the latest version.
npm install npm@latest -g
Next, install Angular CLI using the NPM command:
npm install -g @angular/cli
After the installation, you can verify the Angular CLI version using the following command:
ng version
Output:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 17.3.1
Node: 18.19.1
Package Manager: npm 10.5.0
OS: linux x64
Angular:
Step 3 – Create an Application Using Angular CLI
You can easily use the ng command to create a new Angular application via the command line.
ng new angular-app
Select the CSS and press Enter to create a new Angular app.
? Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS [ https://developer.mozilla.org/docs/Web/CSS ] Sass (SCSS) [ https://sass-lang.com/documentation/syntax#scss ] Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org ] ? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? Yes
Next, change the directory to your application and start Angular locally.
cd angular-app ng serve
Press the CTRL+C to stop the application.
Step 4 – Access Angular Application
To make the Angular application accessible from the outside network, you will need to start it using the –host parameter.
ng serve --host 0.0.0.0 --port 3001
This will start the Angular application on all network interfaces on port 3001, as shown below:
Watch mode enabled. Watching for file changes... ➜ Local: http://localhost:3001/ ➜ Network: http://209.23.9.25:3001/ ➜ press h + enter to show help
You can now access your Angular application using the URL http://your-server-ip:3001 from your web browser.
Conclusion
You can now easily install and use Angular on the Ubuntu 22.04 server. Overall, Angular is a comprehensive framework that empowers developers to build modern, responsive, and scalable web applications with ease. Its rich feature set, strong community support, and backing from Google make it a popular choice for web development projects of all sizes. Try Angular CLI on dedicated server hosting from Atlantic.Net!
