Как создать съемную панель с помощью Angular 4?

Question

Рассматривать; JHipster для генерации базового проекта. Angular 4 - это клиентская часть. Webpack связывает клиентские ресурсы.

Идея заключается в создании подключаемой панели администратора (расширяемой). Будет иметь базовую систему с основной структурой и страницами. Другие команды могут создать собственный плагин (страницу) и подключить его к существующей системе во время выполнения. Поэтому нам нужно загружать модули плагинов с URL-адресов удаленного репозитория, которые будут отправляться со стороны сервера (или, если есть какая-либо идея, пожалуйста, сообщите мне).

Я построил прототип для имитации основного потока. Однако я столкнулся со многими препятствиями. В основном с загрузкой модулей плагинов во время выполнения с использованием Webpack для компиляции нашего проекта.

Webpack заменит все имена модулей на идентификаторы модулей ( ресурс).

Другими словами:

Первое, что нужно понять, это то, что Webpack не может динамически загружать модули, которые неизвестны во время сборки. Это наследуется от способа, которым Webpack строит дерево зависимостей и собирает идентификаторы модулей во время сборки. И это прекрасно, так как Webpack - это пакет модулей, а не загрузчик модулей. Таким образом, вам нужно использовать загрузчик модулей, и теперь единственной приемлемой опцией является SystemJS ( ресурс).

Все статьи, которые я нашел в Интернете, связанные с этой темой, продолжают говорить, что это выполнимо, но это будет сложно. Мне не очень повезло с загрузкой модулей с удаленного URL. Я продолжаю находить вещи, которые говорят: " Да, это возможно, делай х ", затем я нажимаю на какую-то ошибку и ищу это, чтобы найти кого-то еще, говорящего: " Да, это невозможно ". Я попытался использовать загрузчик SystemJs, чтобы лениво загрузить модули плагинов как следующий фрагмент, но пока не повезло!

@Component({
  providers: [
    {
      provide: NgModuleFactoryLoader,
      useClass: SystemJsNgModuleLoader
    }
  ]
})
export class ModuleLoaderComponent {
  constructor(private _injector: Injector,
              private loader: NgModuleFactoryLoader) {
  }

  ngAfterViewInit() {
    this.loader.load('app/t.module#TModule').then((factory) => {
      const module = factory.create(this._injector);
      const r = module.componentFactoryResolver;
      const cmpFactory = r.resolveComponentFactory(AComponent);

      // create a component and attach it to the view
      const componentRef = cmpFactory.create(this._injector);
      this.container.insert(componentRef.hostView);
    })
  }
}

Поэтому мне интересно, действительно ли возможно сделать такую ​​систему, используя Angular 4 и Webpack? Есть ли где-нибудь хорошая документация по этой теме или рабочий пример? Должен ли я рассмотреть другой клиентский каркас для такой системы?

ОБНОВИТЬ

Я нашел следующий ответ для закрытого выпуска репозитория Angular-cli:

Я не вижу способа ленивого обнаружения маршрутов и AOT вместе с динамическими ленивыми маршрутами во время выполнения. Вам понадобится другая система сборки, чем та, которую предоставляет для этого CLI.

SystemJS позволит что-то подобное, но, вероятно, не с AOT.

Итак, как мы должны достичь этого с помощью SystemJS? По-прежнему сталкиваемся с отсутствием документации по этой теме, особенно с учетом Angular 4 (Typescript) в качестве основы.