Custom webpack config sing-spa angular with another plugin or optimization config not working

In single-spa-angular webpack the MFE deployment works only with

extra-webpack.config.js


module.exports = (config, options) => {
const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);

// Feel free to modify this webpack config however you'd like to
return singleSpaWebpackConfig;
};




But with this build only main.js is generating with huge size. Not sure why vendor.js not generating. I am doing a production build with below config

angular.json

"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist/app-name",
"index": "src/index.html",
"main": "src/main.single-spa.ts",
"customWebpackConfig": {
"path": "extra-webpack.config.js",
"libraryName": "app-name",
"libraryTarget": "umd"
},
"deployUrl": "http://localhost:4200",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"preserveSymlinks": true,
"allowedCommonJsDependencies": [
"rxjs",
"qs",
"uuid/v4",
"moment",
"lodash.debounce",
"moment-timezone"
],
"assets": [
"src/assets",
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
},
],
"styles": ["src/styles.scss"],
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": true,
"sourceMap": true,
"optimization": true,
"namedChunks": true
},
"configurations": {
"production": {
"optimization": true,
"aot": true,
"outputHashing": "none",
"sourceMap": true,
"namedChunks": true,
"commonChunk": false,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true,
"preserveSymlinks": true,
"stylePreprocessorOptions": {
"includePaths": ["src"]
}
},
"development": {
"optimization": false,
"outputHashing": "none",
"sourceMap": true,
"namedChunks": false,
"vendorChunk": false,
"buildOptimizer": false,
"stylePreprocessorOptions": {
"includePaths": ["src", "./node_modules"]
}
}
},
"defaultConfiguration": "production"
},


I tried the below options in extra-webpack.config.js

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = (config, options) => {
config = singleSpaAngularWebpack(config, options);

config.optimization = {
...config.optimization,
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
}
}
}
};

config.entry = {
...config.entry,
'polyfills': 'src/polyfills.ts',
};

config.plugins.push(
new MomentLocalesPlugin(),
);
// Feel free to modify this webpack config however you'd like to
return config;
};


With this config getting the expected chunks but application is dead when integrating with main application





Not able to make it working. What is wrong with this?

Continue reading...