Native federation - mfe1 exposes

[rtorricov94]

I am working with micro frontends using native federation in Angular 17. I have encountered the issue that the 'app-loading-bar' component is not displayed in the shell, as I have instantiated it in the main component and it is not necessary to route it. My configuration is as follows: //federation.manifest.json { "mfe1": "http://localhost:4201/remoteEntry.json" }

//federation.config.js ` const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

shared: { ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }), },

skip: [ 'rxjs/ajax', 'rxjs/fetch', 'rxjs/testing', 'rxjs/webSocket', // Add further packages you don't need at runtime ]

});

//app.config.ts import { Routes } from '@angular/router'; import { FormExampleComponent } from './main/components/form-example/form-example.component'; import { loadRemoteModule } from '@angular-architects/native-federation';

export const routes: Routes = [ {path: '', component: FormExampleComponent}, { path: 'flights', loadComponent: () => loadRemoteModule('mfe1', './Component').then((m) => m.RequestGuarenteeComponent), }

] ; `

configuration in mfe1 : //federation.config.js ` const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

name: 'mfe1',

exposes: { './Component': './src/app/main/guarentee-plataform/request-guarentee/request-guarentee.component.ts', './loader':'./src/app/common/components/loading-bar/loading-bar.component.ts' },

shared: { ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }), },

skip: [ 'rxjs/ajax', 'rxjs/fetch', 'rxjs/testing', 'rxjs/webSocket', // Add further packages you don't need at runtime ]

});

`

// app.component.html in mfe1 `

`

[asollberger]

This looks suspicious: // app.component.html in mfe1

<router-outlet> <app-loading-bar></app-loading-bar> <router-outlet/>

and should probably be:

<router-outlet><router-outlet/>

You'll need another loadRemoteModule for the loading bar if you want to load that separately as well. As far as I know the "recommended" way for native federation is loading routes (which then refer to the components inside the remote) rather than loading components remotely (though it does work just fine as well).