upgrading to angular 15 with @angular-builders/custom-webpack getting style-loader error

Question

demo repository link: https://github.com/OrShalmayev/style-loader-error

I recently upgraded my Angular project from version 12 to 15, and I have been using the following configuration in my angular.json file:

"architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
            "customWebpackConfig": {
                "path": "config/library.webpack-config.js",
                "libraryName": "overview",
                "libraryTarget": "system"
            }
        }
    }
}

config/library.webpack-config.js file:

/* eslint-disable no-undef,filenames/match-regex */
const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;
const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
/* eslint-enable no-undef,filenames/match-regex */

const CLIENT_CORE_SERVICES = 'clientCoreServices';

// eslint-disable-next-line no-undef
module.exports = (config, options) => {
  config.plugins.push(new WebpackManifestPlugin(options));

  const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);
  const externals = singleSpaWebpackConfig.externals || [];

  externals.push(CLIENT_CORE_SERVICES);

  const mergedConfig = {
    ...singleSpaWebpackConfig,
    externals
  };

  return mergedConfig;
};

However, when I attempt to run the build process, I receive the following error message:

Error: Module not found: Error: Can't resolve 'style-loader' in 'my-project-path'

Answer 1

the problem is with the version of single-spa-angular.

found a temporary solution for this in https://github.com/single-spa/single-spa-angular/issues/463#