基础应用程序上的微前端资产加载问题

【问题标题】：Micro front end asset loading issue on base app基础应用程序上的微前端资产加载问题
【发布时间】：2020-09-08 21:37:14
【问题描述】：

我使用 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 实现了这个功能。在这里，他已将每个微应用的资产复制到基础应用中，但是有没有更好的方法可以让我在运行时独立地将资产加载到基础应用中，并访问基础应用服务器可以访问的权限。

【问题讨论】：

标签： angular reactjs micro-frontend

【解决方案1】：

我已经通过将主机传递给渲染函数来解决它。所以基本上我在每个图像附近使用变量主机，它将具有完整的 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>
    );
}

【讨论】：