Я новичок в пользовательских элементах. Мне нужно создать настраиваемый элемент для интеграции в другое приложение в нашей компании. Проблема в том, что мой настраиваемый элемент должен быть экспортом по умолчанию, я думаю. Мне нужно сделать мой пользовательский элемент, созданный angular, каким-то образом доступным как module.default, когда хост загружает его.
Есть 2 приложения: HOST-приложение и МОЕ приложение. Я не могу изменить хост-приложение. Хост-приложение полностью вне моего контроля. Хост-приложение, кстати, является приложением React.
Хост-приложение делает примерно следующее:
<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 работать с этим методом загрузки.
Мое приложение angular является стандартным приложением angular-cli, за исключением:
- Я не загружаю компонент в AppModule. Я просто создаю настраиваемый элемент и регистрирую его.
- Для создания единой сборки пакета я использовал ngx-build-plus. Что фактически создало 2 файла: main.js и polyfills.js. Я использовал concat-glob-cli для объединения двух файлов.
- в index.html я просто включаю настраиваемый элемент
В Мое приложение модуль app.module выглядит так:
@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:
<body>
<app-root some-attribute='value'></app-root>
<script src="micro-frontend.js"></script>
</body>
НО Я ДОЛЖЕН загрузить его таким образом, чтобы он был совместим с приложением HOST, которое уже находится в разработке и не может быть изменено.
<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>
Но я не знаю, как использовать его с нашим хост-приложением. Поскольку ведущее приложение пытается загрузить экспорт по умолчанию и пытается define пользовательский элемент, используя экспорт по умолчанию. Чего у меня нет, потому что я не знаю, как выполнить экспорт по умолчанию. Любая помощь приветствуется.
Используемые учебные пособия:
https://www.angulararchitects.io/aktuelles/angular-elements-part-i/
<script type="module">и поступает из приложения HOST, это приложение уже находится в разработке и находится вне моего контроля. Я не могу это изменить. - person gyozo kudor schedule 13.08.2020