如何为使用angular创建的自定义元素进行默认导出 [英] How can I do a default export for a custom element created with angular
问题描述
我对自定义元素非常陌生.我需要创建一个自定义元素以集成到我们公司的另一个应用程序中.问题是我的自定义元素应该是我认为的默认导出.我需要使由angular创建的自定义元素在主机加载时可以通过 module.default 进行访问.
I'm very new to custom elements. I need to create a custom element to integrate into another app at our company. The problem is my custom element should be a default export I think. I need to make my custom element created by angular somehow accessible as module.default when the host loads it.
有2个应用程序: HOST应用程序和 MY应用程序.我无法更改主机应用.主机应用完全不在我的控制范围内.主机应用是React应用.
There are 2 applications: the HOST app and MY App. I cannot change the host app. The host app is completely outside my control. The Host app is a React app btw.
主机应用执行的操作与此类似:
The host app does something similar to this:
<script type="module">
import('/my-angular-bundle.js')
.then(module => window.customElements.define('unique-custom-element-name', module.default))
.catch(error => console.error(error))
</script>
...
<unique-custom-element-name some-attribute='1' other-attribute='2'>
</unique-custom-element-name>
重要提示:我无法更改主机应用.主机应用程序具有其他这样加载的应用程序.脚本的加载方式无法更改.我需要找到一种方法来使生成的角度束与此加载方法一起使用.
我的角度应用程序是标准的angular-cli应用程序，除了:
My angular app is a standard angular-cli app except:
- 我没有引导AppModule中的组件.我只是创建一个自定义元素并注册它.
- 要创建单个捆绑包，我使用了ngx-build-plus.实际上创建了2个文件:main.js和polyfills.js.我用concat-glob-cli来连接两个文件.
- 在index.html中，我只包含了自定义元素
在我的应用程序中，app.module如下所示:
In My App The app.module looks like this:
@NgModule({
declarations: [
SomeOtherComponent,
AppComponent
],
entryComponents: [
AppComponent
],
imports: [
BrowserModule,
],
providers: [],
})
export class AppModule {
constructor(private injector: Injector) { }
ngDoBootstrap() : void {
const customElement = createCustomElement(AppComponent, { injector: this.injector });
//*** how do I export customElement here?? ***
// I define the element here **JUST** to test it locally
customElements.define('app-root', customElement);
}
}
当我自己从index.html托管它时，这非常有效:
And this works perfectly when I'm hosting it myself from index.html:
<body>
<app-root some-attribute='value'></app-root>
<script src="micro-frontend.js"></script>
</body>
但我必须像这样加载它，以便与已经在生产中并且不能更改的HOST应用程序兼容.
BUT I MUST load it like this to be compatible with the HOST app which is already in production and cannot change.
<script type="module">
import('/my-angular-bundle.js')
.then(module => window.customElements.define('unique-custom-element-name', module.default))
.catch(error => console.error(error))
</script>
但是我不知道如何在我们的主机应用程序中使用它.因为主机应用程序尝试加载默认导出，并尝试使用默认导出定义一个自定义元素.我没有这个，因为我不知道如何进行默认导出.感谢您的帮助.
But I don't know how to use it with our host app. Because the host app tries to load a default export and tries to define a custom element using the default export. Which I don't have because I don't know how to do a default export. Any help is appreciated.
使用的教程:
https://www.angulararchitects.io/aktuelles/angular-elements-part-i/
https://www.youtube.com/watch?v=E9i3YBFxSSE
推荐答案
尝试托管构建后获得的自定义元素js，并将该路径包括在托管应用中.
Try hosting the custom element js that you got after the build and include that path in your hosted app.
这篇关于如何为使用angular创建的自定义元素进行默认导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
