0

I'm trying to load a Micro Frontend as a webcomponent, following this tutorial from angulararchitects.

Configuration in my Shell app :

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 is loaded (I can see it in the network tab).

But I have the following error with this configuration (type 'manifest'):

Manifest does not contain mfe1

mf.manifest.json

{
 "mfe1": {
  "remoteEntry": "http://localhost:4201/remoteEntry.js"
 }
}

Do you know the syntaxe to use a webcomponent with a manifest ?

isy
  • 531
  • 1
  • 12
  • 27

1 Answers1

0

the JSON file and main.ts are wrong.

// main.ts
import { loadManifest } from '@angular-architects/module-federation';

loadManifest('/appconf/mf.manifest.json') // you can use a remote too like 'http://localhost:2200/manifest'
.catch(err => console.error(err))
.then(() => import('./bootstrap'))
.catch(err => console.error(err));

the right JSON is this one: {"mfe1": "http://localhost:4201/remoteEntry.js"}

Giuseppe Locanto
  • 1