I am using https://github.com/akhil110/microfrontend_workspace approach to creating web components using angular elements, I created 3 web components and one angular shared-data library inside the projects folder, but when I build a project, the library also gets included inside each web component (in main.js), so that I am not able to share data because of multiple instances of the library, I believe that I need to exclude library inside the bundle. I am trying to set some data, and common methods from my container application so that it can be utilized by all web components. This is my webpack.external.js
const webpack = require('webpack');
module.exports = {
"externals": {
"rxjs": "rxjs",
"@angular/core": "ng.core",
"@angular/common": "ng.common",
"@angular/common/http": "ng.common.http",
"@angular/platform-browser": "ng.platformBrowser",
"@angular/platform-browser-dynamic": "ng.platformBrowserDynamic",
"@angular/compiler": "ng.compiler",
"@angular/elements": "ng.elements",
"projects/common-lib/src":"common-lib",
},
}
Can someone share the solution to this problem... Thanks