This is my old website presence for back date links compatability. Please click here to go to our new look. Or, you will be redirected in a minute.

Environment used
Ubuntu 18.04.5 LTS  GNOME 3.28.2   OS type 64bit

I assume here the following:
1. You know how to install packages on unix via terminal


Error Description   
You all know AngularJS development environment require nodejs, npm and browser sync mainly. There are very less words on internet about main  problem that come on a linux pc when a devloper set up development environement on Linux.

You will use following commands to install nodejs and npm on linux terminal window
sudo apt install nodejs
sudo apt install npm

Above commands will run perfectly without any errors. But after this when you install browser-sync, which is one of good tool for AngularJS, you will get error.   
sudo npm install -g browser-sync



Error Troubleshooting
Now question is why this error comes. This is the older version of node and npm which is not updated repo of linux package manager. Check output of  following commands.     

node --version
OUTPUT: v8.xx.xx

npm --version
OUTPUT: v3.xx.xx

Why repos are not updated ? Why ubuntu/debian's package manager doesn't update this automatically ?  This is not the focus here. Here, I am more concerned about development environment for AngularJS. So, I am not going for explaination on this. Straight moving on rectification part.


Error Retification
There are two ways to handle this situation.

  • First way
    Remove older versions of node and npm. After this install nvm which will install latest versions of node. Execute following commands on your terminal :

    Remove old packages
    sudo apt remove nodejs
    sudo apt remove npm

    Install nvm package
    sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

    Verify nvm
    nvm --version
    OUTPUT: v0.37.2

    Install node
    nvm install v16.2.0

    Verify nodejs and npm
    nodejs -v
    OUTPUT: v0.37.2

    npm -v
    OUTPUT: v7.13.0

    Now doing this you can install packages like browser-sync finely on your linux box
    npm install -g browser-sync

    Verify
    browser-sync start --server --files "css/*.css"

    Output should be
    [Browsersync] Access URLs:
     ---------------------------------------
           Local: http://localhost:3000
        External: http://192.168.43.237:3000
     ---------------------------------------
              UI: http://localhost:3001
     UI External: http://localhost:3001
     ---------------------------------------
    [Browsersync] Serving files from: ./
    [Browsersync] Watching files...

    Point to note here is that nvm install npm with node automatically. And it install it in the current working directoy of your linux terminal.

  • Second way
    Keep older versions and install latest versions via nvm. This method is to be followed in case you have pre installed node and npm for your other development environments like php laravel etc. And those versions are functioning fine for the apps developed by you for that Dev environs. And you dont want to unset. Follow following steps:   


    Install nvm package
    sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

    Verify nvm
    nvm --version
    OUTPUT: v0.37.2

    Install node
    nvm install v16.2.0

    Take backup of file node under /usr/bin Create a symlink to new version
    sudo ln -s /PRESENTWORKINGDIECTORYPATH/.nvm/versions/node/v16.2.0/bin/node /usr/bin/node

    Install browser-sync
    sudo /PRESENTWORKINGDIECTORYPATH/.nvm/versions/node/v16.2.0/bin/npm    install -g browser-sync

    (Replace above PRESENTWORKINGDIECTORYPATH with path of current working direcoty of you linux terminal)

    Verify
    browser-sync start --server --files "css/*.css"

    Output should be
    [Browsersync] Access URLs:
     ---------------------------------------
           Local: http://localhost:3000
        External: http://192.168.43.237:3000
     ---------------------------------------
              UI: http://localhost:3001
     UI External: http://localhost:3001
     ---------------------------------------
    [Browsersync] Serving files from: ./
    [Browsersync] Watching files...

    Remove the symlink created above. Put backup of file node back to /usr/bin  

Anytime you are using npm or node and want to know which path will be used. Use following commands:

which node
which npm

Ok Readers! Bye for now. More will come but please help me to keep me out of shackles of poverty. For this please pay a small amount of money of your choice on my payment page. I will keep putting articles here. --- Dheeraj


 

Environment setup of AngularJS

00:05:56
Views: 54999
Environment setup of AngularJS

Angular Project Setup in Visual Studio Code

00:17:15
Views: 103692
Angular Project Setup in Visual Studio Code

Angular - Setup Development Environment

00:10:04
Views: 1849
Angular - Setup Development Environment

AngularJS tutorial -  What is AngularJS

00:10:28
Views: 2096480
AngularJS tutorial - What is AngularJS

AngularJS Tutorial

00:40:13
Views: 366282
AngularJS Tutorial

What is the difference between angular 1 2 4 5 6 7 8 9

00:12:32
Views: 5820
What is the difference between angular 1 2 4 5 6 7 8 9

Angular Interview Questions and Answers | Angular Interview Questions | Top Angular Questions

00:46:41
Views: 482164
Angular Interview Questions and Answers | Angular Interview Questions | Top Angular Questions