Динамически добавлять компонент в дочерние маршруты импортируемой библиотеки

Question

Я ищу способ выполнить такой случай:

• В одном рабочем пространстве Angular есть два проекта - один проект библиотеки с компонентами и второй основной проект, которыйиспользует компоненты из этой библиотеки;
• Библиотека состоит из модуля настроек, который имеет меню слева и просмотр справа, где router-outlet дляМодуль настроек дочерние маршруты используется;
• Модуль настроек позволяет пользователю настроить модуль таким образом, чтобы меню содержало опцию щелчка со связанным компонентом - после выбора опции,компонент показан справа, а опция выделена;

export const config = {
  authorization: {},
  navigation: {
    title: 'Test page',
    homeRoute: 'home',
    actions: [{ title: 'Do stuff', route: '/settings' }]
  },
  settings: {
    groups: [
      {
        groupName: 'Advanced',
        options: [
          {
            name: 'Settings Option Route',
            route: 'test',
            component: TestComponent
          }
        ]
      }
    ]
  }
};

@NgModule({
  declarations: [AppComponent, TestComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ThatImportedLibrary['forRoot'](config)
   ],
  exports: [TestComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Компонент настроек в библиотеке извлекает данные о маршрутах во внедренном объекте и сбрасывает дочерние маршруты на основе этого (используя основные настройки маршрут и добавляядочерний компонент из config объекта ).

export const settingsRoutes: Routes = [
  {
    path: 'settings',
    component: SettingsPanelComponent,
    children: []
  }
];

@NgModule({
  imports: [RouterModule.forChild(settingsRoutes)],
  exports: [RouterModule]
})
export class SettingsPanelRoutingModule {
  constructor(@Inject(ConfigService) private config: FacConfig) {
    // RouterModule.forChild(settingsRoutes);
    // Looking for a way to dynamically add the child route from config object
    const settingsRoutes = [
      {
        path: 'settings',
        component: SettingsPanelComponent,
        children: []
      }
    ];

    const childRoute = {
        path: config.settings.groups[0].options[0].route
        component: config.settings.groups[0].options[0].component
    }

    settingsRoutes[0].children.push(childRoute);
    this.router.resetConfig(settingsRoutes);
    }
}

Однако он не работает - после выбора опции с дочерним компонентом из основного модуля (TestComponent) он вызывает:

ERROR Error: No component factory found for TestComponent. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (component_factory_resolver.ts:17)

• В основном проекте после импорта библиотеки можно перейти к маршруту / settings , который открывает меню с параметрами;
• Параметры вВ настройках указывается имя, путь к маршруту и ​​компонент , существующий в основном проекте ;
• Нажатие на опцию должно открыть назначенный маршрут, например, / settings / test , но это не работает (см. выше);
• Можно ли ссылаться на внешний компонент (из другого приложения) как дочерний маршрут к импортированному модулю?

Answer 1

Хорошо, я ответил сам - в основном app.module мне просто нужно было добавить этот конкретный модуль в свойство entryComponents в @ NgModule.

@NgModule({
  declarations: [AppComponent, TestComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ThatImportedLibrary["forRoot"](config)
  ],
  exports: [TestComponent],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [TestComponent] // that's all!
})