dkhrunov / ngx-mfe Goto Github PK

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>)

Hi any plans to update this awesome library to use/excapt angular v17/18?

First - Great job your lib simplifies so much.

Can you offer a way to configure the modul asynchronously.

You could inject the NgxMfeOptions in forRoot or offer another method
forRootAsync(options$: Obeservable) | forRootAsync(options$: Promise)

So that the individual mfe configurations can also be obtained via api or fetch.

Hi dkhrunov,

first of all, Thank you very much for putting this directive together. I am using it and works very nicely. The only issue I have is when I try to add more than one mfeOutlet on the page. For instance, the page has a header, footer, and body. each of them needs to have mfeOutlet.

 <ng-container *mfeOutlet="'XXXX/XXXXXX'"></ng-container>
 <ng-container *mfeOutlet="'YYYYYY/YYYYY'"></ng-container>

Error:

ngx-mfe.mjs:317 TypeError: (0 , rxjs__WEBPACK_IMPORTED_MODULE_2__.lastValueFrom) is not a function
    at ngx-mfe.mjs:207:37
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at asyncToGenerator.js:32:1
    at new ZoneAwarePromise (zone.js:1387:1)
    at asyncToGenerator.js:21:1
    at MfeComponentFactoryResolver.resolveComponentFactory (ngx-mfe.mjs:203:122)
    at ngx-mfe.mjs:339:55
    at Generator.next (<anonymous>)

Thank you very much!
hmendezm

When changing the inputs, the ngOnChanges method is not being called, and we must use a setTimeOut to delay fetching the data. Under no circumstances is the ngOnChanges method being invoked

Hi any plans to update this awesome library to use/excapt angular v16?

Hello,

we are using Nx with its mfe functionality which looks similar to the architects approach but the question is if I can use your lib with Nx based mfe config flow together?

Thx

I followed the steps in your example everything works except when I try to use this. This always is undefined.

HTML

  <ng-container *mfeOutlet="'targetarea/Settings';outputs: { okEvent: next};">
      </ng-container>

CODE BEHIND

  public next(e) {

    if (e.sucess) {
      that.nameStep = true;
    }
  }

Targetarea/Settings CODE

export class SettingsComponent implements OnInit, AfterViewInit {
  @Output() public okEvent = new EventEmitter();
....


  public continue() {
    const projectTypes = PROJECTTYPES;
    this.okEvent.emit({ sucess: true });
  }

}

Should I use Nx and monorepo in order to use these library?
I'am using Angular v13 with @angular-architects/module-federation 12.5.3, so following the readme I should use ngx-mfe 1.0.2