(fix) Setup esm-form-entry to use webpack module federation
#1168
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: -451 kB (-6%) ✅ Total Size: 6.73 MB
ℹ️ View Unchanged
|
ibacher
changed the title
esm-form-entry to use webpack module federationesm-form-entry to use webpack module federation
4 tasks
Yeah, I don't think SingleSPA's docs have kept up with Angular.
This works on my machine (with my tweaks) as is |
ibacher
approved these changes
May 22, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Requirements
Summary
This PR sets up
esm-form-entryto use webpack module federation (WMF). Presently, all the other frontend modules get loaded using webpack module federation, except for thisesm-form-entry, which gets loaded using the legacy mechanism (System.import).esm-form-entryruns on Angular v12, which supports WMF. What needed adjustment is our webpack configuration.The approach I've used here leverages ngx-build-plus which gets provided by @angular-architects/module-federation. The single-spa docs recommend using @angular/builders to customize your build configuration. Still, I've not had much success trying to tweak it for this purpose. Setting things up with @angular-architects/module-federation was relatively straightforward on the other hand.
FWIW, the module federation organization on GitHub has many examples that use ngx-build-plus, so I think it's a sound choice.
I'm happy to get feedback on whether we should stick to using Angular builders and suggestions for what kind of tweaks we might need to make to the webpack configuration to support that.
Also FWIW, I've not found plenty of mentions of webpack module federation in the Angular builders repo, save for maybe this one issue.
NB: This PR requires openmrs/openmrs-esm-core#677 to work.