Как добавить динамический компонент в Angular Router

Question

Я создаю подключаемое угловое приложение.

Я нашел следующую статью:

Создание расширяемого приложения Dynamic Pluggable Enterprise с Angular

Обычно все работает нормально, но когда я попытался добавить угловой маршрутизатор, у меня возникли некоторые проблемы.

В настоящее время я не могу добавить динамически загруженный компонент в маршрутизатор.

Я пробовал что-то вроде этого:

this.pluginLoader.load(pluginName).then(moduleFactory => {
              const moduleRef = moduleFactory.create(this.injector);
              const entryComponent = (moduleFactory.moduleType as any).entry;
              const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(
                entryComponent
              );

              this.router.config.push({
                path: `${pluginName}`,
                component: entryComponent
              });

              this.router.resetConfig(this.router.config);
              this.router.navigate([`/${pluginName}`]);
            });

Но этот код вызывает следующую ошибку:

core.js: 15723 Ошибка: Uncaught (в обещании):Ошибка: не найдена фабрика компонентов для функции () {this.x =! 1}.Вы добавили его в @ NgModule.entryComponents

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

Какя могу добавить компонент к фабрике компонентов или как найти правильный путь для таких компонентов?

Answer 1

Я нашел решение, чтобы добавить динамически загруженный модуль в угловой маршрутизатор, мы должны использовать свойство LoadChildren, но прямо из объекта Route.В этом случае сначала нужно создать объект Route, а затем добавить его в конфигурацию маршрутизатора.

loadPlugin(pluginName: string) {
   this.pluginLoader.load(pluginName).then(moduleFactory => {

      const route: Route = {
          path: `${pluginName}`,
          loadChildren: () => moduleFactory
      };

      this.router.config.push(route);
   });

}