Migrate an existing angular app into a mfe host

[timtos]

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:

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

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

[leosvelperez]

Thanks for reporting this!

Could you please share a repro? Maybe the trimmed-down app you mentioned.

[leosvelperez]

Please double-check that after running the setup-mfe you now have a bootstrap.ts file with the contents of what was in main.ts before running it. The main.ts should have something like:

import('./bootstrap').catch(err => console.error(err));

[timtos]

@leosvelperez Thank you for your help. I doube-checked what you asked for and everything looks good. I'll try to trim down the app; although, it could be tough, as it is a kinda huge app ;)

[timtos]

@leosvelperez It seems like I was able to narrow it down and that angular i18n is making trouble; especially the line '@angular/localize/init';

Sample repo can be found here.
If one removes the line import '@angular/localize/init'; in the polyfills.ts the message disappears.

Steps that were taken to create the repo:

• npx create-nx-workspace@latest
• nx migrate latest
• npx nx migrate --run-migrations
• yarn
• yarn add -W @angular/localize
• yarn nx g @angular/localize:ng-add

What am I doing wrong?

P.S.: One little side question: Why is npx create-nx-workspace@latest not creating a workspace with the latest nx version? I had to call nx migrate latest explicitly.

[Coly010]

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

[tadamczak]

@Coly010 im having exactly same error right now even though im working on latest available version 14.4.2. Removing import '@angular/localize/init'; line from polyfills 'works' since im not getting the error but when im trying to navigate to some other section of my app i get

Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your polyfills.ts file)

So removing the line is not a solution for me :(
Any idea what might be causing that again since you merged a fix for that?

*Edit.
When i moved '@angular/localize/init';` below zone.js import in polyfills the error with eager consumptions disappeared but the error that @angular/localize is missing remains

[littlepenguinni]

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

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.