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!