angular11-microfrontends-lazy-components production build not working

Hi,

I’m facing an error when I try to load a remote component in the production build. For some reason, it works in development mode when I serve the application, but after I generate the build and try to run it from a local http server I get the following error in the console:

main.99097cdd2ad1485c22e3.js:1 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined
TypeError: Cannot read property 'ɵcmp' of undefined

I have debugged and realised that the Angular NgModule that I’m remotely loading in the production build, has the ‘exports’ property set as an empty array. However in the code it’s exporting the component, and you can see it’s there in the development version. I don’t know if there’s something I should change in the webpack configuration or something, I’ve been trying out things for a few days and there’s no way I could get it to work…

Any help would be really appreciated.

Thank you

[nohanna]

@noxborough If you are using AOT compilation, adding a static field will not change anything about emod.declarations, it will be still empty. It will simply add a new field (that will not be tree-shaked) to your module. So you have to retrieve your components from your static field not from emod.declarations.

[noxborough]

@nohanna I saw your other recommendation to use exportAs as a way to reference your components by a “known” name after optimization. This does work, but for my use case I need to maintain the class names even after uglify/minify process.

So in my custom webpack.config.js I include this section (see below). The keep_classnames is the key there. But after I included this, I also had to set concatenateModules: false, because for some reason the class names ended up being doubled up (i.e. if class name was ClassAComponent, it would end up as ClassAComponentClassAComponent). Very weird, but found the solution here: https://stackoverflow.com/questions/49999999/duplicate-class-names-after-using-webpack-in-production-mode-with-uglifys-keep

optimization: {
        concatenateModules: false,
        minimizer: [
            (compiler) => {
                compiler.options.optimization.minimizer.filter(({ constructor: { name } }) => name === "TerserPlugin").forEach(
                    terser => {
                        terser.options.terserOptions.keep_classnames = true;
                        terser.options.terserOptions.keep_fnames = false;
                    }
                );
            },
        ],
    },