directive does not work when Build for production

[hmendezm]

HI dkhrunov,

Sorry for bothering you. Now I am working on deploying the app in production mode. In this case, I have all remotes working standard alone. The problem is when I use the directive I got the error below. My guess is that when the directive tries to upload the component, this is not found. Note: The app works if I run serve (development mode)

do you have any idea what is the problem? I have the following in place:

HTML

 <ng-container *mfeOutlet="'sharedcomponents/Loader';inputs: { isLoading: isLoading, messages:loadingMsg};">
  </ng-container>

Configuration

    MfeModule.forRoot({
            mfeConfig:{
 'sharedcomponents': 'http://localhost:5005/remoteEntry.js',
},
      preload: ['sharedcomponents'],
            loaderDelay: 0,
        }),

Sharedcompoenent MFE

webpack.config

  exposes: {
        'Loader':'apps/sharedcomponents/src/app/loader/loader.module.ts',
         },

Loader.module

import { LoaderComponent } from './loader.component';
import {  NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: [LoaderComponent],
  exports: [LoaderComponent]
})
export class LoaderModule {
  constructor(){
    console.log("%cLoaderModule constructor: LIBS/COMPONENTS/LOADER","color: blue; font-size: 20px");
  }
}

ERROR

329.cf6448c1ab7708fd.js:1 Error: LoaderComponent don't registered in module i
    at 329.cf6448c1ab7708fd.js:1:65453
    at Generator.next (<anonymous>)

[dkhrunov]

Hi, i think problem in the Configuration, when you deploy you microfront MfeModule try to find it in http://localhost:5005/remoteEntry.js

Try to provide correct host path where you deploy your MFE.

Check this article, this should help you.

[hmendezm]

Hi dkrunov and thanks for your reply The path is correct. This is working if I use development mode. The only thing I do is to change is below. I guess has to be with the way you find the component in the module. you are using the name but when the code is optimized, the names are replaced by letters to compress size. Do you have a working example where you build with optimizer enable?

Note: yes, I am using the approach in the article. So in this case is still local but built as production. So the path is the same. The difference is code is optimized by webpack. project.json

"buildOptimizer": true,
 "optimization": true,

ngx-mfe code

public _findComponentType<TModule = unknown, TComponent = unknown>(
        componentName: string,
        compiledModule: ModuleWithComponentFactories<TModule>
    ): Type<TComponent> | undefined {
[       return [compiledModule.componentFactories.find((f)](url) => f.componentType.name === componentName)](url)
            ?.componentType;
    }
}

[dkhrunov]

Hi @hmendesm! Thanks for your bug report, I have found the source of this problem, I will update the library soon and post a new version where I will make corrections. When I do this, I will contact you.

[hmendezm]

Thanks Dkhrunov

In meantime, I downloaded you code and made modifications to get the componentType. I created a new decorator.

I am testing right now. The issue when the code is built with optimizing, the names of class and variables are gone. So you need a way to keep the name and componettype together. The new decorator will do that. I use Map and the key is the name of the class and the value the componenttype. So I am adding the decorator to all my components that I will use *mfeOutler.

Thanks for all your work on this Best Hmendezm

On Thu, Jun 23, 2022 at 3:42 PM Denis Khrunov @.***> wrote:

Hi @hmendesm! Thanks for your bug report, I have found the source of this problem, I will update the library soon and post a new version where I will make corrections. When I do this, I will contact you.

— Reply to this email directly, view it on GitHub https://github.com/dkhrunov/ngx-mfe/issues/7#issuecomment-1164799521, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOLKVYSWNJ6NFQV4432FX3VQS4YVANCNFSM5ZQM7VLQ . You are receiving this because you authored the thread.Message ID: @.***>

[dkhrunov]

Cool, I want to see it in action, can you create a Pull Request with your changes?

[dkhrunov]

In meantime, I`m has anouther solution, but for this you will have to exposes the component class itself, as it was before version 1.1.0, like you do it with modules.

You can check how it work before v1.1.0 source code here

[dkhrunov]

Hello! I introduce a new version 2.0.0, where I fixed this issue.

But with v2 I made few breaking changes, check updated documentation here and check out a Migration guide to v2

[hmendezm]

Thanks! I will test it next week and let you know. I forget to create pr with la solution I implemented. Maybe it is not needed any more.

On Thu, Jul 7, 2022 at 4:32 PM Denis Khrunov @.***> wrote:

Hello! I introduce a new version 2.0.0, where I fixed this issue.

But with v2 I made few breaking changes, check updated documentation here https://github.com/dkhrunov/ngx-mfe/blob/master/README.md and check out a Migration guide to v2 https://github.com/dkhrunov/ngx-mfe/blob/master/migration-guide-to-v2.md

— Reply to this email directly, view it on GitHub https://github.com/dkhrunov/ngx-mfe/issues/7#issuecomment-1178192750, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOLKV2KLSO6TEVKPOLJQGLVS45HBANCNFSM5ZQM7VLQ . You are receiving this because you authored the thread.Message ID: @.***>