Reuse Angular within @angular/elements component bundle with webpack

Question

We have built a dashboard using Angular 6.0.3, this is built using the Angular CLI.

We are experimenting using @angular/elements to create stand alone web-components that can also be reused as widgets. These web-components are being loaded into the DOM and are all working correctly.

The problem is the bundles for these widgets are quite large - they are using the same version of Angular as the dashboard so we the widgets can reuse these already loaded parts.

Question: Is this even possible? Can we share @angular/core between completely separate web pack bundles?

We have tried using Angular Webpack Externals which greatly reduced the bundle size (obviously) but all of the Angular references fail

 const NgCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  output: {
    path: __dirname + '/build',
    filename: 'infpnl_widget.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: '@ngtools/webpack'
      }
    ]
  },
  resolve: {
    extensions: [
      '.ts',
      '.js'
    ]
  },
  externals: [
    function (context, request, callback) {
      if (request.startsWith('@angular/')) {
        return callback(null, {
          root: ['ng', camelCase(request.replace(/^@angular\//, ''))],
          commonjs: request,
          commonjs2: request,
          amd: request
        });
      }
      callback();
    }
  ],
  plugins: [
    new NgCompilerPlugin({
      tsConfigPath: './tsconfig.json',
      mainPath: './src/index.ts',
      skipCodeGeneration: true
    }),
    new UglifyJsPlugin(),
    new CompressionPlugin()
  ],
  mode: 'production',
  stats: 'errors-only'
};