Vaadin into Angular v1.x with through Webpack bundle - angularjs

Question

I am trying to bundle Vaadin in a single file to be loaded inside my portal (which running with AngularJS V1.x) following this guide. It fails because is using an old configuration (which I fixed for the development mode but I didn't for the production one) and because I could bundle the references left in the node modules instead of copied inside the bundle.
So I tried with a new webpack setup with this configuration:
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
// TODO: Add common Configuration
mode: 'development',
performance: {
hints: false,
maxEntrypointSize: 5512000,
maxAssetSize: 5512000
},
devServer: {
contentBase: './dist',
},
module: {}
};
var jsConfig = Object.assign({}, config, {
entry: {
index: './src/index.js',
vaadin: './src/webcomponentsjs/main.js'
},
optimization: {
minimize: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'Vaadin Library',
template: './src/index.html'
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: false
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['transform-class-properties']
}
}
}
],
}
});
module.exports = [
jsConfig
];
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"dependencies": {
"lodash": "^4.17.21",
"web-animations-js": "^2.3.2"
},
"devDependencies": {
"#babel/cli": "^7.14.5",
"#babel/core": "^7.14.6",
"#babel/plugin-syntax-top-level-await": "^7.14.5",
"#babel/plugin-transform-template-literals": "^7.14.5",
"#babel/preset-env": "^7.14.5",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.2.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^5.2.6",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^5.3.1",
"install": "^0.13.0",
"mini-css-extract-plugin": "^1.6.0",
"npm": "^7.17.0",
"sass": "^1.35.1",
"sass-loader": "^12.1.0",
"script-ext-html-webpack-plugin": "^2.1.5",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.39.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "echo \"Bundling Vaadin library to less files and convert to ES5 with Webpack and Babel (loader)\" && webpack",
"start": "webpack serve --open"
},
"keywords": [],
"author": "",
"license": "ISC"
}
And here the errors (for each component imported in index.js):
ERROR in ./src/index.js 2:0-31
Module not found: Error: Can't resolve '#vaadin/vaadin-button' in '/Users/username/Dev/current/webpack-vaadin/src'
Did you mean './#vaadin/vaadin-button'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
Did anyone already manage to import Vaadin into an angularJs application? How did you do or could you point me at the right place in the documentation (which I didn't find as very new with this FW)?
Thanks in advance.