Search code examples
htmlangulartypescriptmicroservicesweb-component

How to embed an Angular application into a different Angular application on another server using microservices?


The problem is as follows:

We are using a microservice architecture. Lets say we have 2 servers, a ServerHost and a ServerClient. I want the ServerHost to host a Webpage that routes to the webpage on the ServerClient. Like an iframe but with more control. Both webpages are in Angular.

I have read about Angular Elements and Webcomponents, but I could not figure out how to implement this between different servers.

Can someone point me to articles or examles, I would be very grateful.

EDIT: ( for clarification )

The goal is for each microservice to have its own webpage ( for configuration etc. ). All webpages however, should be reached within a shell from the ServerHost. This sever should basically host a webpage that emebeds all the other pages.

If a user would land at the main page, there should be a list with links to the other pages. But when clicking on the link, the main navigation menu in the shell should not vanish. And the user will open the new page within the old one.

It is also important that the webpages are able to communicate with one another. E.g. to tell the route. Btw, the servers are all written in C#.


Solution

  • I don't think that this is possible because of security reasons.

    You can actually load modules only from the same origin. If you do want to do somthing like you describe you can setup as this normally is designed.

    1 Server-App
    1 Client-App
    1 SSO-Service/ + App

    The user will login through the SSO-Service and then if he is allowed the Server-App redirects the user to the Client-App. Through that Process you can use the SSO-Service to keep the source and destination urls tracked, so that you know where the user comes from and where he want to go and manage from it the claims what the user can do and what not.