angular - 基础应用程序上的微前端资产加载问题
问题描述
我使用 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。在这里,他已将每个微应用程序的资产复制到基本应用程序中,但是有没有更好的方法可以让我在运行时独立地将资产加载到基本应用程序中,并访问基本应用程序服务器可以访问的权限。
解决方案
我已经通过将主机传递给渲染函数来解决它。所以基本上我在每个图像附近使用变量主机,它将具有完整的 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>
);
}
推荐阅读
- spring-mvc - 从多部分请求标头和正文中删除无效字符
- java - 来自“https://services.gradle.org/distributions/gradle-6.1.1-all.zip”的 Gradle 分发。无法安装
- api - 如何通过 REST API 获取共享点文件的签出状态
- excel - 如何检测公式的结果值已更改
- python - 在数据帧上对 2 列进行元组以反转地理编码
- python - TF 2.6:model.summary 中不存在主干
- python - 用于重定向的 Django 自定义装饰器
- ansible - 与 json_query 一起使用时 set_fact 不起作用
- coq - 如何证明定理 plus_lt : forall n1 n2 m, n1 + n2 < m -> n1 < m /\ n2 < m
- node.js - 从 npm 包 `cross-env` 迁移到 `dotenv`