Angular multiple apps dist folder doesn't load the index file on local server

Question

I have one main app and several product apps that I want to serve using single url.

I have put the distribution of main app in the root of public folder of local http-server. Within the public folder, I've created products/app2 and products/app3 and placed the distribution of app2 and app3 respectively.

-public
    -products
        -app2
          /* build of app2 */
        -app3
          /* build of app3 */
     .....
     .....
     /* build of main app */

When I hit the url

 http://192.168.18.10:8080/

the content of main app loads. However, when I hit

http://192.168.18.10:8080/products/app2/

the index.html of app2 does not load and it redirects to main app.

I tried putting simple index.html file directly at root of products folder and it works fine.

Why Angular distribution build placed in the above structure fails to load and how should I be routing to product builds.

Angular is a spa, you need to config the router to your app. — Kevin Zhang
– Kevin Zhang, Commented Dec 25, 2020 at 7:44
@KevinZhang - thanks for your reply, Kindly share any resource/article that I can follow to achieve this. I do understand routing within a single angular app but did not find much on the above architecture. — Stacy J
– Stacy J, Commented Dec 25, 2020 at 8:08
@KevinZhang - Assuming the approach mentioned here is what you are referring to stackoverflow.com/questions/48126517/… — Stacy J
– Stacy J, Commented Dec 25, 2020 at 8:51
any particular reason you went with "several product apps", rather than having a single app with multiple modules for different products? Generally with Angular, you don't nest various apps one inside the other. — ulmas
– ulmas, Commented Dec 25, 2020 at 22:10
@StacyJ Can you add your package.json file so i can help you better? — Fmerco
– Fmerco, Commented Jan 5, 2021 at 15:52

Emanuele Gandolfi · Accepted Answer · 2021-01-11 09:11:29Z

0

I think that the problem is that your web server is configured so that all the requests that don't point to an existing file are redirected to the main Angular App (which is correct in general, but not in your situation). You should modify your htaccess file (if you are using apache) or your nginx config file so that if the request URL starts with a sub-app folder name then the request is redirected to that specific sub-app folder root, and not to the main app. Once that you've redirected the request to the correct Angular app, Angular will do the rest.

answered Jan 11, 2021 at 9:11

Emanuele Gandolfi

4602 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GBra 4.669 · Accepted Answer · 2021-01-11 21:52:27Z

0

I think you have three options.

(Probably obvious) Merge your two apps into one Angular app, creating an app with two modules (each module is one of the apps), so when you build everything is already "glued" up together.
A bit like option 1, but even fancier. If those apps have nothing in common other than the login, you could create an app with the Monorepo pattern. Just like Google does for his Google Workspace (formerly called G Suite aka Gmail, Drive, Maps...). A good guide: https://medium.com/@laakissi.achraf/angular-monorepo-patterns-with-nx-part1-73b50c4b6e7b)
Use Nginx + Docker (a good guide: https://medium.com/@kaushiksamanta23/serve-multiple-angular-apps-from-single-nginx-server-in-development-production-mode-with-docker-ae8d53b43283)

edited Jan 11, 2021 at 21:52

answered Jan 8, 2021 at 20:24

GBra 4.669

1,7093 gold badges14 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular multiple apps dist folder doesn't load the index file on local server

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related