Integrating Mendix Module into Angular Application Using Micro Frontend Architecture(Without iFrame)

0
Hi Mendix Community,I have deployed a module in Mendix (running in Kubernetes). My main product is built using Angular, and I want to integrate the Mendix module into the Angular application using a micro-frontend architecture (Module Federation or similar approach).My goal is:Angular app = host applicationMendix app/module = one micro frontendLoad Mendix UI inside Angular without full page redirectMaintain independent deploymentsQuestions:Is it possible to embed or expose a Mendix app/module as a micro frontend inside an Angular host app?Are there best practices or reference architectures for Angular + Mendix micro frontend integration?How to handle authentication and session sharing between Angular and Mendix?Any guidance, documentation, or real-world examples would be very helpful.Thanks in advance!
asked
2 answers
0

Hello,


Yes, this is possible, but Mendix cannot be integrated using Module Federation like Angular components. Mendix runs as a full application, not just a frontend module.

The recommended and most practical approach is to embed the Mendix app inside your Angular app using an iframe. This allows the Angular app to act as the host and the Mendix app to behave like a micro frontend, without a full page redirect. Both applications can be deployed independently, which fits the micro frontend architecture.

For authentication, the best approach is to use SSO (OIDC, Azure AD, Auth0, etc.) so that when the user logs in to Angular, Mendix automatically recognizes the same user without asking to log in again.

In summary, Mendix can work as a micro frontend inside Angular using iframe embedding and SSO for authentication. This is the standard and recommended approach.


Thanks

answered
0

ou cannot expose a Mendix module as a true Angular Module Federation micro-frontend.

Mendix apps are full SPA applications, not exportable UI components.

So:

  • Not possible via Webpack Module Federation
  • Not possible as Angular remote module
  • Not possible as embeddable React component

Mendix runtime owns routing, state, session, and DOM root.

What IS Actually Possible

There are only 3 supported integration patterns:

1.iFrame Embedding

This is the only fully supported UI embedding method.

Angular (host)

  • → embeds Mendix app in iframe
  • → share authentication via SSO (OIDC / SAML)

This maintains:

  • ✔ Independent deployment
  • ✔ Independent scaling
  • ✔ Clean separation

This is the architecture Mendix officially supports.

2.Reverse Proxy Path-Based Routing (Advanced)

Example:



https://app.com/angular → Angular
https://app.com/mendix → Mendix

Handled via:

  • NGINX
  • API Gateway
  • Kubernetes Ingress

User navigates without full domain redirect.

But still:

It is NOT true micro-frontend composition.

It is path-based application separation.

3.Headless Mendix (Recommended for Micro-Frontend Architecture)

If your goal is true micro-frontend:

Use Mendix as backend only.

Expose:

  • REST APIs
  • OData
  • Published services

Angular builds the UI fully.

This is the clean micro-frontend compatible architecture.

Why Module Federation Will NOT Work

Mendix:

  • Compiles to a bundled web app
  • Uses internal routing
  • Owns root DOM
  • Controls state and lifecycle
  • Requires runtime bootstrap

You cannot import it as:



loadRemoteModule()

Because it is not built as a federated module.

Authentication & Session Sharing Correct Way

If using iframe or reverse proxy:

Use Single Sign-On:

  • OpenID Connect (recommended)
  • SAML

Flow:

Angular → Identity Provider → Mendix

Both trust same IdP.

Session sharing via cookies is NOT recommended.

Use token-based SSO.

Real-World Architecture

Best practice architecture:



Kubernetes
 ├── Angular (UI host)
 ├── Mendix runtime
 ├── Identity Provider (Keycloak / Azure AD)
 └── API Gateway

Authentication via OIDC.

UI integration via iframe or path routing.

Conclusion

True micro-frontend integration (Module Federation style) between Angular and Mendix is NOT supported.

Mendix is a full SPA runtime and cannot be exported as a federated UI module.

If you need micro-frontend architecture:

  • Use Mendix as backend (API only)
  • Or embed via iframe + SSO
  • Or use reverse proxy path separation

Those are the only production-safe approaches.

answered