eui-micro-frontend-builder

eUI Micro frontend Builder

This is a custom webpack builder that is using angular architect package to build an angular module into a single js file. This can be then distributed and lazily loaded by an angular application.

How can i use the builder?

In your angular.json file, where projects are declared, under the architect.build set the builder to "eui-micro-frontend-builder:browser" .

Then you can build any module of your project like so: ng build --project features --prod --module=./app/features/module1/module1.module#Module --pluginName=module1 --sharedLibs=@micro/shared --outputPath=./features

Params

The builder support the below properties,

• module: A string of the form path/to/file#exportName that acts as a path to include to bundle
• pluginName: A name of compiled bundle
• sharedLibs: A comma-delimited list of shared lib names used by current plugin
• externals: A path to .json file which contains a list of external dependencies, like { dep1: 'mydep', dep2: 'another'}
• extraWebpackConfig: path of the extra webpack configuration

Pay Attention!

Keep in mind that the builder works with the module mapping below. In case you import a module not mentioned here, you need to map it yourself by using the --externals <file.json> flag!

'rxjs': 'rxjs',
'@angular/core': 'ng.core',
'@angular/common': 'ng.common',
'@angular/forms': 'ng.forms',
'@angular/router': 'ng.router',
'@angular/platform-browser': 'ng.platform-browser',
'@angular/platform-browser/animations': 'ng.platform-browser-animation',
'@eui/core': 'eui.core',
'@eui/base': 'eui.base',
'@ngx-translate/core': 'ngx.translate',
'tslib': 'tslib'