Angular Config Troubleshooting

When you transfered your local Angular web host program to server/cloud and start you web service, you may meet some of these common problems below and these are the solution you can try to fix them.

--------------------------------------------------------------------------------------------------------------

Problem 1 : Compile error: System limit for number of file watchers reached.

When you config Angular properly on your server computer/pod and run the project compile cmd, the "system limit for number of file watchers reached" error appeared. The detail error messages will be shown as below:

Error from chokidar (/home/usr/siem_project/siem_env/Docker/docker-curriculum/webapp/fusion-cloudy-master/src/assets/vendor): Error: ENOSPC: System limit for number of file watchers reached, watch '/home/usr/siem_project/siem_env/Docker/docker-curriculum/webapp/fusion-cloudy-master/src/assets/vendor'        

Solution:

Linux uses the inotify package to observe filesystem events, individual files or directories. Since Angular hot-reloads and recompiles files on save, it needs to keep track of all project's files. Increasing the inotify watch limit should hide the error/warning messages. The meaning of this error is that the number of files monitored by the system has reached the limit, so you need to modify the number of system monitoring files:

Edit the system control file :

sudo gedit /etc/sysctl.conf        

Add a line at the bottom, for the max number set the number bigger than your project total file number, then save and exit :

fs.inotify.max_user_watches=500000        

Reload the system config setting:

sudo sysctl -p        

Run the compile cmd ng serve --open or npm run dev to check whether the problem has been solved.

----------------------------------------------------------------------------------------------------------

Problem 2 : The user can check the web page from localhost but can not view by use the host IP address.

On host machine the user can access with the url http://localhost:4200/ , when connect the host computer to network other computer can not access the url with the ulr http://ip:4200/

Solution:

You can use the following command to run the project then other usr access with your host computer IP.

ng serve --host 0.0.0.0 --disable-host-check        

If you are using npm and want to avoid running the command every time, we can add the following line to the package.json file in the scripts section.

"scripts": {
  ...
  "start": "ng serve --host 0.0.0.0 --disable-host-check"
  ...
}        

Then you can run you app using the below command to be accessed from the other system in the same network.

npm start