1

我使用 Angular & React Js 和 Angular 中的基本/容器应用程序创建了两个微型应用程序。微型应用程序在不同的端口上运行，基础应用程序从特定端口导入 main.js 文件。我已经按照这篇文章实现了这个功能 - https://medium.com/javascript-in-plain-english/create-micro-frontends-using-web-components-with-support-for-angular-and-react -2d6db18f557a。在这里，他已将每个微应用程序的资产复制到基本应用程序中，但是有没有更好的方法可以让我在运行时独立地将资产加载到基本应用程序中，并访问基本应用程序服务器可以访问的权限。

4

1 回答 1

0

我已经通过将主机传递给渲染函数来解决它。所以基本上我在每个图像附近使用变量主机，它将具有完整的 URL。如果您加载微前端，单独的主机将是空的，因此它应该从同一主机加载。

window.renderHeader = (containerId, history, host) => {
    ReactDOM.render(
        <App history={history} host={host} />,        
        document.getElementById(containerId),
    );
};

然后在容器中

const renderMicroFrontend = () => {
    window[`render${name}`](`${name}-container`, history, host);
};

在 HTML

function App({history, host}) {
    return (
        <div className="header">
            <div className="logo">
                <img src={host + "/logo.png"} alt="logo" />
            </div>
        </div>
    );
}
于 2021-03-18T18:48:28.907 回答