How to share external libraries between multiple angular elements

Question

I'm currently working with Angular Elements and more specifically trying to make multiple Elements communicate and interact with each other. In my case, the two elements I am trying to create share an external library (ag-grid) which enables them to display an advanced table which the user can interact with.

My question was regarding the bundling of these two elements. Currently, I am building the two elements separately using ngx-build-plus. The output gives me 2 main.js, 2 scripts.js, 2 polyfills.js, ... files and my goal would be to have 1 main.js file per element, and only 1 scripts.js file that would be shared between all of the elements.

ngx-build-plus allows us to create a webpack.external.js that lists the dependecies that would be shared:

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",

        // Uncomment and add to scripts in angular.json if needed
        // "@angular/router": "ng.router",
        // "@angular/forms": "ng.forms"
    }
}

I've been trying to add ag-grid-angular to this file and also to the "scripts" array in the angular.json but I haven't had any success as I do not have much experience with Angular or Angular Elements.