angular 15 module-federation Style not working

100 Views Asked by At

Hello Stack Overflow community,

I'm encountering an issue with my Angular microfrontend project where I'm facing the following error related to styles. I am using Angular 15 with the @angular-architects/module-federation/webpack library for microfrontend development.

I had a problem adding global styles in remote apps. To resolve this issue, I imported style.scss into the shared module in remote app.

In Angular 14, everything was fine, and the projects worked smoothly. However, when I upgraded my Angular projects to version 15, I encountered an error.

Here's my webpack.config.js file:

const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const shareAll = mf.shareAll;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "tsconfig.json"), []);
const webpackConfig = withModuleFederationPlugin({
  name: 'shareholders',
  exposes: {
    './PagesModule': './src/app/pages/pages.module.ts'
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});

module.exports = {
  ...webpackConfig,
  output: {
    uniqueName: "remoteapp1",
    publicPath: "auto",
  },
  optimization: {
    runtimeChunk: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  experiments: {
    outputModule: true,
  },
  plugins: [],
};

And here's the error message:

**File was processed with these loaders: *
./node_modules/resolve-url-loader/index.js *
./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js.
You may need an additional loader to handle the result of these
loaders.**

This is the sample code for my remote apps.

I want my remote apps' styles to work without relying on a style library.

If anyone has encountered a similar problem or has insights into what might be causing this issue, I would greatly appreciate your help.

Thank you!

0

There are 0 best solutions below