How to Install Angular on Arch Linux

Angular is a component-based framework used for building single-page client applications using HTML and TypeScript. Supported by Google, it is the perfect framework for building large-scale, powerful, and easy-to-serve web apps. It is cross-platform and offers a wide range of features and benefits, including reduced development time, unit test friendliness, and more.

In this post, we will show you how to install Angular on Arch Linux.

Step 1 – Configure Repository

By default, the default repository is outdated in Arch Linux, so you will need to modify the default mirror list. You can do it by editing the mirror list configuration file:

nano  /etc/pacman.d/mirrorlist

Remove all lines and add the following lines:

## Score: 0.7, United States
Server = http://mirror.us.leaseweb.net/archlinux/$repo/os/$arch
## Score: 0.8, United States
Server = http://lug.mtu.edu/archlinux/$repo/os/$arch
Server = http://mirror.nl.leaseweb.net/archlinux/$repo/os/$arch
## Score: 0.9, United Kingdom
Server = http://mirror.bytemark.co.uk/archlinux/$repo/os/$arch
## Score: 1.5, United Kingdom
Server = http://mirrors.manchester.m247.com/arch-linux/$repo/os/$arch
Server = http://archlinux.dcc.fc.up.pt/$repo/os/$arch
## Score: 6.6, United States
Server = http://mirror.cs.pitt.edu/archlinux/$repo/os/$arch
## Score: 6.7, United States
Server = http://mirrors.acm.wpi.edu/archlinux/$repo/os/$arch
## Score: 6.8, United States
Server = http://ftp.osuosl.org/pub/archlinux/$repo/os/$arch
## Score: 7.1, India
Server = http://mirror.cse.iitk.ac.in/archlinux/$repo/os/$arch
## Score: 10.1, United States
Server = http://mirrors.xmission.com/archlinux/$repo/os/$arch

Save and close the file, then update all the package indexes with the following command:

pacman -Syu

Step 2 – Install Node JS and NPM

First, download and run the following script to install NVM on your system.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

You will get the following output.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

=> Close and reopen your terminal to start using nvm or run the following to use it now:

Next, activate the NVM environment variable using the following command.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

Next, check the NVM version with the following command.

nvm --version

Output.

0.39.2

Next, install the latest version of Node JS using the following command.

nvm install --lts

You will get the following output.

Installing latest LTS version.
Downloading and installing node v18.14.2...
Downloading https://nodejs.org/dist/v18.14.2/node-v18.14.2-linux-x64.tar.xz...
####################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v18.14.2 (npm v9.5.0)
Creating default alias: default -> lts/* (-> v18.14.2)

To verify the Node JS version, run the following command.

node --version

Output.

v18.14.2

Step 3 – Install Angular CLI

Angular provides a CLI tool used to install and manage Angular applications via the command line interface.

First, install Angular CLI with the following command.

npm install -g @angular/cli

After the installation, you can verify the Angular version with the following command.

ng version

You should see the following output.

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

    ng analytics disable --global

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 15.2.1
Node: 18.14.2
Package Manager: npm 9.5.0
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1502.1 (cli-only)
@angular-devkit/core         15.2.1 (cli-only)
@angular-devkit/schematics   15.2.1 (cli-only)
@schematics/angular          15.2.1 (cli-only)

Step 4 – Create an Angular Application

First, install the Git package using the following command.

pacman -S git

Next, create a new Angular application using the following command.

ng new myapp

Once the application is created, you will get the following output.

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE myapp/README.md (1059 bytes)
CREATE myapp/.editorconfig (274 bytes)
CREATE myapp/.gitignore (548 bytes)
CREATE myapp/angular.json (2695 bytes)
CREATE myapp/package.json (1036 bytes)
CREATE myapp/tsconfig.json (901 bytes)
CREATE myapp/tsconfig.app.json (263 bytes)
CREATE myapp/tsconfig.spec.json (273 bytes)
CREATE myapp/.vscode/extensions.json (130 bytes)
CREATE myapp/.vscode/launch.json (474 bytes)
CREATE myapp/.vscode/tasks.json (938 bytes)
CREATE myapp/src/favicon.ico (948 bytes)
CREATE myapp/src/index.html (291 bytes)
CREATE myapp/src/main.ts (214 bytes)
CREATE myapp/src/styles.css (80 bytes)
CREATE myapp/src/assets/.gitkeep (0 bytes)
CREATE myapp/src/app/app.module.ts (314 bytes)
CREATE myapp/src/app/app.component.css (0 bytes)
CREATE myapp/src/app/app.component.html (23083 bytes)
CREATE myapp/src/app/app.component.spec.ts (953 bytes)
CREATE myapp/src/app/app.component.ts (209 bytes)
✔ Packages installed successfully.

Next, navigate to the myapp directory and run the application using the following command.

cd myapp
ng serve --host 0.0.0.0 --port 8080

Once the application started successfully, you should see the following output.

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.71 MB | 
polyfills.js          | polyfills     | 314.26 kB | 
styles.css, styles.js | styles        | 209.39 kB | 
main.js               | main          |  45.98 kB | 
runtime.js            | runtime       |   6.51 kB | 

                      | Initial Total |   2.28 MB

Build at: 2023-03-03T15:38:15.307Z - Hash: 70299a3e44f1744b - Time: 12653ms

** Angular Live Development Server is listening on 0.0.0.0:8080, open your browser on http://localhost:8080/ **


✔ Compiled successfully.

Step 5 – Access Angular Application

At this point, Angular is installed on your server. Now, it’s time to access it via a web browser. Open your web browser and access the Angular web interface using the URL http://your-server-ip:8080. You should see the Angular page on the following screen.

Conclusion

In this tutorial, we explained how to install Angular on Arch Linux. We also create a sample Angular app and test it via a web browser. You can now start creating and deploying your own Angular application on the production server. Try Angular on dedicated server hosting from Atlantic.Net!