Use a Manifest file with web components

[isylhdin]

Hello, thank you for your work.

Is it possible to load a Micro Frontend as a webcomponent, using a Manifest file ?

I Tried in my Shell :

// main.ts
initFederation('/appconf/mf.manifest.json')
.catch(err => console.error(err))
.then(() => import('./bootstrap'))
.catch(err => console.error(err));

// bootstrap.ts
bootstrap(AppModule, {
  production: false,
  appType: 'shell'
}).catch((err) => console.error(err));;

// app-routing.module.ts : working
 {
    matcher: startsWith('mfe1'),
    component: WebComponentWrapper,
    data: {
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js', 
        exposedModule: './web-component',
        elementName: 'app-mfe1'
    } as WebComponentWrapperOptions
 },

// app-routing.module.ts : not working
{
    matcher: startsWith('mfe1'),
    component: WebComponentWrapper,
    data: {
        type: 'manifest',
        remoteName: 'mfe1',
        exposedModule: './web-component',
        elementName: 'app-mfe1'
    } as WebComponentWrapperOptions
}

My Manifest file is loaded. But when I try to navigate to /mfe1 it throws : Manifest does not contain mfe1 In function loadRemoteModule, config is empty.

Do you know what I'm doing wrong ? Thx

[bh3605]

You need to expose your web component on the web component side.