question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Migrate an existing angular app into a mfe host

See original GitHub issue

Current Behavior

I have an existing angular app using the latest version of nx (14.1.9). I now want to migrate this relatively big app to be a mfe host. In a first step even without any remotes. The current app should just function as a host. So I called the ng generate @nrwl/angular:setup-mfe schematic to transform the current app into a host:

image

Everything compiles and the application can be served but when I reload the page in the browser, I get:

image

I couldn’t find any documentation on how to migrate an existing app to a mfe host and I have absolutely no idea where to even look for a solution or how to tackle this error. I trimmed down the app so that the main.ts and the app component are very simple but I cannot get it to work. Is it some configuration issue? Is my assumption correct that this should work without any issues?

Expected Behavior

I was expecting, that adding a host is not a problem as it is just the host that can contain the “old” app without any issues.

Failure Logs

Uncaught Error: Shared module is not available for eager consumption: 482323
    at Object.__webpack_require__.m.<computed> (consumes:287:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module.31126 (polyfills.js:14:80)
    at __webpack_require__ (bootstrap:24:1)
    at startup:6:1

Environment

Node : 16.13.2 OS : win32 x64 yarn : 1.22.5

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Coly010commented, Jun 6, 2022

Your npm cache could be causing the npx create-nx-workspace@latest issue.

I’ve found the issue with the polyfill and I’ll have a fix created for it soon

0reactions
littlepenguinnicommented, Aug 4, 2022

Hi @tadamczak did you find a solution for this? We are facing the same issue

Read more comments on GitHub >

github_iconTop Results From Across the Web

Transforming an existing Angular application into a ... - Medium
In this tutorial we will show how to transform an existing Angular application into a Progressive Web App (PWA) step by step.
Read more >
Setup Module Federation in Angular with Nx | by Colum Ferry
This will set up Webpack's Module Federation Plugin for the application and configure it as a host application, ready to consume remote applications....
Read more >
How to Build Micro Frontends Using Module Federation in ...
How to create an Angular web application with micro frontends using Webpack 5 and Module Federation. In this first post of the series, ......
Read more >
Getting Started With Micro FrontEnds and Angular
Follow the interactive prompts and create an Angular application called shell, which will be the host in our application.
Read more >
How to Build a Micro Frontend with Webpack's Module ... - Bitovi
Now you can set up Module Federation in the example Angular application. Begin by cloning the Bitovi Place My Order Application, here and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found