Микроприложения с Angular 7 - Zone.js и проблемы с пользовательскими элементами - PullRequest
Новая
       23

Микроприложения с Angular 7 - Zone.js и проблемы с пользовательскими элементами

0 голосов
/ 28 декабря 2018

Я довольно новичок в разработке Angular (7), потому что я думаю об архитектуре нового большого веб-проекта.Поэтому я немного поиграюсь с возможными вариантами, особенно используя микро-интерфейс.

Я создал два угловых проекта -> "micro-app-shell" и "micro-app-a" .

Оболочкавнешний контейнер веб-приложения, которое управляет несколькими микро-приложениями.

Я прочитал некоторые статьи о микро-приложениях с angular и хочу попробовать подход с пользовательскими элементами.

"micro-app-a "

выдержка из " app.module.ts "

@NgModule({
  declarations: [
    AppComponent,
    ClientAComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // bootstrap: [AppComponent]
  entryComponents: [
    ClientAComponent,
  ]
})
export class AppModule {

  constructor(private injector: Injector) {

  }

  ngDoBootstrap() {
    const appElement = createCustomElement(ClientAComponent, { injector: this.injector });
    customElements.define('client-a', appElement);
  }

}

" app.component.html "

<div style="text-align:center">
  <h1>
    Client A Micro App
  </h1>
</div>

Я создаю приложение с помощью следующей команды: 

ng build --output-hashing none --output-path C:/Dev/mdo_workspace/micro-app-test/micro-app-shell/src/assets/scripts

"micro-app-shell"

Я добавил следующееto of index.html 

 <script type="text/javascript" src="./assets/scripts/runtime.js"></script>
  <script type="text/javascript" src="./assets/scripts/polyfills.js"></script>
  <script type="text/javascript" src="./assets/scripts/styles.js"></script>
  <script type="text/javascript" src="./assets/scripts/vendor.js"></script>
  <script type="text/javascript" src="./assets/scripts/main.js"></script>

Я расширяю app.module.ts частью схемы 

schemas: [CUSTOM_ELEMENTS_SCHEMA],

Теперь мои вопросы / проблемы

1 a) Когда я раскомментирую в "micro-app-a" -> polyfills.js import zone.js (import 'zone.js / dist / zone';) и запускаю "micro- appapp-shell "Я получаю ошибку

Зона уже загружена.

1 б) Когда я комментирую в "micro-app-a" -> polyfills.js импорт zone.js (импорт 'zone.js / dist / zone';) и запустить «micro-app-shell» я получаю сообщение об ошибке

В этой конфигурации Angular требует Zone.js

Wat является правильным способом предотвращения этой ошибки?Или я могу проигнорировать это?

2) Когда я применяю изменения вопроса 1a и запускаю "micro-app-shell" Я хочу показать "micro-app-" как пользовательский элемент в app.comment.html, например: 

<div>
  <client-a></client-a>
</div>

Содержимое " micro-app-shell " - " app.component.html " отображается, но я получаю ошибку:

Не удалось создать 'HTMLElement': пожалуйста, используйте оператор 'new', этот конструктор объекта DOM нельзя вызвать как функцию.

Я, например, следующие образцы:

https://www.softwarearchitekt.at/post/2018/05/04/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx https://www.ngdevelop.tech/angular-elements/

Большое спасибо за вашу помощь заранее!

Ответы [ 3 ]

0 голосов
/ 17 января 2019

Эта проблема уже исправлена ​​в последней версии zone.js 0.8.28, пожалуйста, проверьте ее.

0 голосов
/ 11 февраля 2019

Пример выше выглядит так, как будто он должен работать.Я также получил ту же ошибку, и похоже, что есть некоторые проблемы с поддержкой браузера.Я смог заставить все работать, добавив @webcomponents/custom-elements

npm install @webcomponents/custom-elements

Затем добавил следующее в конце polyfills.ts 

// Used for browsers with partially native support of Custom Elements
import '@webcomponents/custom-elements/src/native-shim';

// Used for browsers without a native support of Custom Elements
import '@webcomponents/custom-elements/custom-elements.min';
0 голосов
/ 06 января 2019

Здесь вы можете посмотреть мой пример проекта https://github.com/xmlking/angular-elements-in-angular-shell Я все еще планирую улучшить опыт разработчиков

...