英文:
Loading Angular15 MicroFrontend in ASPX page with plain JavaScript
问题
我们有一个 Angular15 应用（微前端=MFE），启用了 ModuleFederationPlugin（Webpack），这个应用可以轻松加载到另一个 Angular 应用（主机）中。但我们想在 ASP.Net (.NET 4.0) ASPX WebForm 应用程序中使用相同的功能。找不到任何可以在经典 ASPX 页面中加载 MFE 的普通 JavaScript。是否可能用纯 JavaScript 加载？
用IFrame加载对于这个应用程序来说不可接受，因此正在寻找直接集成的解决方案。非常感谢您的帮助。
以下是webpack.config.js中的代码。
module.exports = withModuleFederationPlugin({
name: 'ss-emr-modules',
filename:"remoteEntry.js",
exposes: {
'./ReferralModule': './src/app/referral-mfe/referral-mfe.module.ts',
},
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},
});
英文:
We have Angular15 app (Micro-frontend=MFE) enabled with ModuleFederationPlugin(Webpack), this app easily gets loaded in another Angular app(Host). But we would like to use the same in ASP.Net (.NET 4.0) ASPX WebForm application. Not finding any plain/vanilla JavaScript which can load MFE in classic ASPX page. Is it possible to load with pure JavaScript?
Loading with IFrame is not acceptable standard for this application, hence looking at direct integration solution. Help is much appreciated.
Below is the code from webpack.config.js.
module.exports = withModuleFederationPlugin({
name: 'ss-emr-modules',
filename:"remoteEntry.js",
exposes: {
'./ReferralModule': './src/app/referral-mfe/referral-mfe.module.ts',
},
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},
});
答案1
得分: 0
以下是翻译好的部分：
这是一种方法，使用阴影 DOM，为什么使用阴影 DOM？
以下的引用来自 https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
"能够将标记结构、样式和行为隐藏和与页面上的其他代码分开，以便不同的部分不会冲突，代码可以保持整洁"
工作中的代码非常庞大，但在这里尝试分享核心实现。
1）创建后构建脚本：生成 JavaScript 文件，其中包含从 HTLMLElement 扩展的自定义元素，应位于生成 Angular 主文件、polyfill 和运行时 JavaScript 文件的相同位置，以下是来自后构建脚本/命令的示例代码输出[创建一个可以为您执行此任务的控制台应用程序，可以是 Java、Python、C#、Go、Rust 等]。
class AppOneMfe extends HTMLElement { constructor() { super(); } connectedCallback() { const shadow = this.attachShadow({ mode: "open" }); // 添加逻辑来复制 <angular 构建输出>/index.html 作为此自定义元素的主体
- 微前端 Angular 应用的 AppModule 应该实现 DoBootstrap
providers: [], // bootstrap: [AppComponent] // 删除此行 }) export class AppModule implements DoBootstrap { ngDoBootstrap(appRef: ApplicationRef): void { const element = document.querySelector("app-one-mfe")?.shadowRoot?.querySelector("app-root"); appRef.bootstrap(AppComponent, element);
或者
- 如果需要切换 MFE，则 Angular Element 适用，以下是将 MFE 制作为主机应用程序上的自定义元素的代码
ngDoBootstrap(appRef: ApplicationRef): void { const element = createCustomElement(AppComponent, { injector: this.injector, }); customElements.define("app-one-mfe",element);
- 在主机应用程序的 HTML 中，放置以下代码，这将加载远程应用程序，在这种情况下是微前端。
<div> <app-one-mfe></app-one-mfe> <!--这是第#1步中的自定义元素标签--> <script defer src="http://studyground/mfapp1/entry.js"></script> </div>
这解决了问题，现在可以从 ASPX 页面加载 Angular 应用。
英文:
Here is the approach, using shadow DOM, why shadow DOM?
Below block quote is an answer from https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
> "Being able to keep the markup structure, style, and behavior hidden
> and separate from other code on the page so that different parts do
> not clash, and the code can be kept nice and clean"
Working code is huge but trying to share core implementation here.
- Create post build script: generates JavaScript file having custom element extended from HTLMLElement, should reside in same location where angular main, pollyfill and runtime javascripts files are generated, below is the example code output from post build script/command[create a console app which will do this job for you, can be java, python, c#, go, rust.... ].
> class AppOneMfe extends HTMLElement {
> constructor() {
> super();
> }
> connectedCallback() {
> const shadow = this.attachShadow({ mode: "open" });
> // Add logic to replicate <angular build output>/index.html as body of this custom element
- Micro-frontend Angular app's AppModule should implement DoBootstarp
> providers: [],
> // bootstrap: [AppComponent] // Remove this line
> })
> export class AppModule implements DoBootstrap {
> ngDoBootstrap(appRef: ApplicationRef): void {
> const element = document.querySelector("app-one-mfe")?.shadowRoot?.querySelector("app-root");
> appRef.bootstrap(AppComponent, element);
OR
- If need to toggle MFE, then Angular Element works, here is the code to make MFE as a custom element on host application
> ngDoBootstrap(appRef: ApplicationRef): void { const element =
> createCustomElement(AppComponent, { injector: this.injector, });
> customElements.define("app-one-mfe",element);
- In host application's HTML, place below code, this will load remote application, in this case Micro-Frontend.
> <div>
> <app-one-mfe></app-one-mfe> <!--This is a custom element tag from step#1 -->
> <script defer src="http://studyground/mfapp1/entry.js"></script>
> </div>
And this resolved the issue, now Angular app is loaded from ASPX page.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论