The context
Leaflet is an incredible library that empowers developers to inject maps in their web application. It was created by Volodymyr Agafonkin, an Ukrainian Developer.
You can find it here, and on github you can find all the source code and the project.
I used it for a simple module, inside my project Ingenium Platform, to show the real-time position of vehicles. You can embed this Micro-Frontend inside the application and show map and vehicle moving. It works perfectly with Angular and Module Federation, but unfortunately it doesn't work with native federation
The error, was due to the use of a third party wrapper, but at last it is due to leaflet, that is not compatible with native federation as you can see in the following picture:
The error is at line 6, where you can see import { latlng, map, control, tileLayer} from leaflet
If you are interested in the error you can find the entire project that replicates it on my github (on the master branch).
So, to better understand how bundler, commonJS and ES6 modules worked, i decided to take action.
The workspace
I have created a "standard" Native Federation workspace, made up by a shell project and an mfe project. You can find it here on my github. The master branch contains the "error", so if you want to take a look at it, feel free to switch branch and test.
The solution is in "Experimental_leaflet_esm" branch, so when you switch to this branch you can find this situation.
Shell project
In the shell project we have a simple appComponent. The html part of the component contains an <ng-template> that will be used to dinamically load the MFE. In the following picture you can see the html.
The typescript part of the component is made of a simple call that loads dynamic component from MFE location, using @angular-architects library for Native Federation.
The important parts here are:
- the loadRemoteModule() method, that loads the component from the location set in federation.manifest.json.
- the createComponent method, that dynamically create the component inside the container.
MFE Project
The MFE project is made of a simple appComponent that shows a map made with leaflet. The HTML part is very simple, as you can see in the following picture:
So there is nothing to say about it.
The typescript section is more "juicy". At the top you can see the import from esm leaflet module. Thanks to this import you can use leaflet also in Native Federation.
But there is a catch: if you don't declare a module as you can see in the following image, VSCode and the Typescript compiler will complain, because they can't find the correct import (Leaflet is made to be used with CommonJS Module, do you remember?). So you can create a leaflet-esm.d.ts file to declare the module.
Now there is the last problem: when you write L.Icon, VSCode says that:
Property 'Icon' does not exist on type 'typeof import("leaflet/dist/leaflet-src.esm.js")'
To solve this issue, we can expose inside the previously declared module all leaflet types, as it follows:
Now everything compiles correctly and we have no more warnings or errors. The remaining code in appComponent is trivial:
- It declares an icon and its shadow pointing to assets in MFE location
- It creates a map centered on the city of Venezia
- It loads map layer from openstreetmap
- A marker and a popup is created in San Marco's Square, the center of Venezia
Starting both projects with the command npm run start:all , you can see the results!
Conclusions
Using Leaflet with Native Federation is possible, but it needs some tweaking. We all hope that a new version of leaflet package will be available soon. In the meantime, we can make it work with the solution explained here. Happy mapping and microfrontending!