Динамическая загрузка модулей и компонентов во время выполнения в Angular 4

1

Я хотел бы разработать метод загрузки модулей и/или компонентов в приложение с угловым слоем AOT и был заглушен множеством решений, которые никогда, похоже, не доставляют меня туда, где я хочу быть.

Мои требования таковы:

  • Мое основное приложение AOT скомпилировано и не знает, что он загружает до выполнения, поэтому я не могу конкретно идентифицировать мой динамический модуль как компонент записи во время компиляции (что явно необходимо для "динамического" примера загрузки компонента, представленного на Angular.io)
  • В идеале я хотел бы получить код из базы данных на заднем плане с помощью запроса GET, но я могу пережить его, просто проживая в папке вместе с скомпилированным сайтом.
  • Я использую Webpack для компиляции моего основного приложения, разбивая его на куски - и поэтому многие решения на базе SystemJS кажутся тупиками - на основе моих текущих исследований я мог ошибаться.
  • Мне не нужно знать или иметь доступ к каким-либо компонентам моего основного приложения напрямую - по сути, я бы загружал одно угловое приложение в другое, причем динамически загруженный модуль мог, возможно, иметь несколько жестко контролируемых явных точек интерфейса с родительского приложения.

Я изучил с помощью таких инструментов, как SystemJsNgModuleLoader, и мне кажется, что у меня есть компилятор Angular, который я счастлив сделать, если AOT каким-то образом позволил мне включить его, даже если я не использую его в другом месте. Я также посмотрел на непосредственную компиляцию моего динамического модуля с помощью ngc и загрузку полученного ngfactory и скомпилированного компонента/модуля, но я не знаю, возможно ли это, или если это так - какие инструменты Angular предоставляют для этого. Я также видел ссылки на ANALYZE_FOR_ENTRY_COMPONENTS, но не могу четко разобраться, каковы ограничения этого, поскольку первый анализ указывает на то, что я не совсем то, что ищу.

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

Является ли то, что я пытаюсь сделать, даже возможно? Угловая 2+ просто презирает эту модификацию своей внутренней архитектуры приложения "на лету"?

Теги:
angular

1 ответ

1

Я думаю, что нашел статью, которая точно описывает, что вы пытаетесь сделать. Короче, вам нужно взять на себя жизненный цикл бутстрапа.

Магия в этом фрагменте здесь. import {AComponentNgFactory, BComponentNgFactory} from './components.ngfactory.ts'; @NgModule({ imports: [BrowserModule], declarations: [AComponent, BComponent] }) export class AppModule { ngDoBootstrap(app) { fetch('url/to/fetch/component/name').then((name)=>{ this.bootstrapRootComponent(app, name)}); } bootstrapRootComponent(app, name) { const options = { 'a-comp': AComponentNgFactory, 'b-comp': BComponentNgFactory };

https://blog.angularindepth.com/how-to-manually-bootstrap-an-angular-application-9a36ccf86429

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню