Loading Angular apps through Nginx is very slow - Takes 60 seconds

Instead of using port you can go for multiple locations on same domain if you want to load it on one domain. You will not need to start ng serve every time.

The solution is to build the app using “base-href” option.

for example build multiple app with base-href:

cd app_one && ng build --base-href=/app_one/cd app_two && ng build --base-href=/app_two/cd app_three && ng build --base-href=/app_three/

This build option will lead to the situation where the index.html of your app will have a BASE href defined accordingly to the path defined in the command.

<base href=”/app_one/” />

For the NGINX setup, you’ll have to override the default NGINX settings by using the following configuration:

server {    listen 80;    server_name apps.example.com;    location /app_one/ {        alias /var/www/html/app_one/dist/;        try_files $uri$args $uri$args/ /app_one/index.html;    }    location /app_two/ {        alias /var/www/html/app_two/dist/;        try_files $uri$args $uri$args/ /app_two/index.html;    }    location /app_three/ {        alias /var/www/html/app_three/dist/;        try_files $uri$args $uri$args/ /app_three/index.html;    }}

This combination of ng build command and NGINX setup has the following advantages:

• you can access your apps through the configured URLs
• if you get on a Angular route, you can refresh pages without getting a 404

To Access app you can use url as

www.apps.example.com/app_onewww.apps.example.com/app_two

for more example please refer this

Edit

If you want to serve multiple you can use on multiple ports you can config NGINX as

this is my config for proxy passing to localport,

server {    listen 80;    server_name app1.example.com;    location / {        proxy_pass http://localhost:4200;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection 'upgrade';        proxy_set_header Host $host;        proxy_cache_bypass $http_upgrade;    }}server {    listen 80;    server_name app2.example.com;    location / {        proxy_pass http://localhost:8080;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection 'upgrade';        proxy_set_header Host $host;        proxy_cache_bypass $http_upgrade;    }}

or for build app you can configure to,

server {    listen 80 ;    root /PATH/TO/APP_ONE/DIST/;    index index.html index.htm;    server_name app1.example.com;    proxy_buffering on;    proxy_buffer_size 1k;    proxy_buffers 24 4k;    proxy_busy_buffers_size 8k;    proxy_max_temp_file_size 2048m;    proxy_temp_file_write_size 32k;    location / {          try_files $uri $uri/ /index.html;    }}server {    listen 80 ;    root /PATH/TO/APP_TWO/DIST/;    index index.html index.htm;    server_name app2.example.com;    proxy_buffering on;    proxy_buffer_size 1k;    proxy_buffers 24 4k;    proxy_busy_buffers_size 8k;    proxy_max_temp_file_size 2048m;    proxy_temp_file_write_size 32k;    location / {          try_files $uri $uri/ /index.html;    }}