How to install Angular in Ubuntu

Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations. In these articles, we will cover the installation procedure of angular on the Ubuntu 20 operating system.

Step for install Angular in Ubuntu

To install Angular in Ubuntu, we first need a node to run and install the npm package, we need to install the node first.

Installing Node in ubuntu

We will first install the node, to install the node we need to add the PPA file of the node to our Ubuntu package archive. To add the PPA file we need a curl program.

sudo apt install curl
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs 
OR
sudo apt-get install -y nodejs

Fixing npm permission

You may receive an access error when you try to install an Angular or Ionic package globally. This indicates that you do not have permission to write to the directories that npm uses to store global packages and commands. Without fixing npm permission, we need to use Sudo all time for the Ionic and Angular projects. We need to configure the node to the local user so that we don’t have to use the Sudo command.

You can fix this problem using one of three options:
1. Change the permission to npm’s default directory.
2. Change npm’s default directory to another directory.
3. Install Node with a package manager that takes care of this for you.

Option 1: Change the permission to npm’s default directory

$npm config get prefix
By running the command above we will get the path of the npm directory. If the display path is not /usr then we need to change the owner of npm’s directories to the name of the current user (your username!):   This changes the permissions of the sub-folders used by npm and some other tools (lib/node_modules, bin, and share).

WARNING: If the displayed path is just /usr, switch to Option 2 directly and no need to run the code below or you will mess up your permissions.

$sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

Option 2: Change npm’s default directory to another directory

There are times when you do not want to change ownership of the default directory that npm uses (i.e. /usr) as this could cause some problems, for example, if you are sharing the system with other users. Instead, you can configure npm to use a different directory altogether. In our case, this will be a hidden directory in our home folder.

2.1 Make a directory for global installations:

$mkdir ~/.npm-global

2.2 Configure npm to use the new directory path in command mode:

$npm config set prefix ‘~/.npm-global’

2.3 Open .profile hidden file

$sudo gedit .profile

The above command will open .profile hidden file in gedit editor and if the line exists then add the export word in front of PATH if the line does not exists then add the following line at end of .profile file and save the file.

export PATH=~/.npm-global/bin:$PATH

2.4 Back on the command line, update your system variables by running the command below:

$source ~/.profile

Now we can install and run an Angular framework and install the npm package without the Sudo command. On the terminal run the install command shown below

npm install -g @angular/cli

Conclusion
We can complete how to install Angular in ubuntu’s latest version, once you had installed Angular, then we can create an angular project in the Ubuntu terminal using the following command.

ng new angularProject

Related topic on Angular

• Angular Component LifeCycle
• Introduction to Angular Component
• How to create an Angular custom component