How to handle NullInjector Error in Angular MFE when using a share module? (micro frontend)

Question

I've created a share module that has a lot of dependencies and logic in it. Then I'm using this share module in my main project, and it works totally fine. But when I want to use it as a remote micro-frontend, I got this error in the shell project:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)

In the main project I have dependency in a service which has dependency in share module as well. Why it works fine in stand-alone state and this error only occurs in micro frontend? How to handle this NullInjector Error?

Answer 1

I've found the answer. I was using a module called 'ngx-toastr' and it worked as a stand-alone. But in micro frontend it wasn't working, so I had to import 'ngx-toastr' module in shell project and the code below in webpack.config.js in both projects (in MFE project and Shell project).

plugins: [
        new ModuleFederationPlugin({
            library: { type: "module" },   
            remotes: {
                        . . .
            },
            shared: share({
                        . . .
                "ngx-toastr":{singleton: true, strictVersion: true, requiredVersion: 'auto'},
            })