Angular - 与清单中的 Web 组件和 url 进行模块联合

Question

我正在尝试按照 angulararchitects 的本教程加载微前端作为 Web 组件。

我的 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：工作

 {
    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：不工作

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

我的清单已加载（我可以在网络选项卡中看到它）。

但是我的配置出现以下错误（输入“manifest”）：

清单不包含 mfe1

mf.manifest.json

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

您知道使用带有清单的 Web 组件的语法吗？

Answer 1

JSON 文件和 main.ts 错误。

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

正确的 JSON 是这样的：

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