2

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.

Stacy J
  • 2,721
  • 15
  • 58
  • 92
  • 1
    Angular is a spa, you need to config the router to your app. – Kevin Zhang Dec 25 '20 at 07: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 Dec 25 '20 at 08:08
  • @KevinZhang - Assuming the approach mentioned here is what you are referring to https://stackoverflow.com/questions/48126517/serve-multiple-angular-apps-from-the-same-server-with-nginx – Stacy J Dec 25 '20 at 08: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 Dec 25 '20 at 22:10
  • @ulmas - Yes correct. It was done my inexperienced team, where in there are different products, each hosted separately. However, now they realized that single sign on and session management is becoming a headache, hence looking for a way to solve it. – Stacy J Dec 26 '20 at 07:15
  • 1
    @StacyJ Can you add your package.json file so i can help you better? – Fmerco Jan 05 '21 at 15:52

2 Answers2

0

I think you have three options.

  1. (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.
  2. 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)
  3. 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)
GBra 4.669
  • 1,512
  • 3
  • 11
  • 23
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.

Emanuele Gandolfi
  • 390
  • 1
  • 9