Angular 5 App Архитектура дизайн

Question

У меня есть несколько вопросов, связанных с дизайном приложения Angular 5 -

Мы разрабатываем корпоративное приложение, похожее на заполнитель Widgets и Widgets Store. Это работает так: когда пользователь попадает на страницу, он видит несколько виджетов, которые он может настроить. Если он хочет, он может добавить больше виджетов из Магазина.

Когда он добавляет виджеты, он будет динамически обновляться на странице. Вы можете рассматривать каждый виджет как компонент. Сказав это, у меня есть несколько вопросов -

1. Без добавления компонентов в entryComponents массива NgModule можем ли мы добавлять компоненты динамически? (Я знаю другой как ComponentResolverFactory). Есть что-нибудь еще?

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

2. Мы планируем создать Angular Shell, куда мы сможем загружать приложения Angular, которые могут загружаться динамически в зависимости от конфигурации.

Что-то вроде Shell содержит: верхний и нижний колонтитулы, а содержимое - еще одно приложение Angular, которое может быть загружено.

Любая помощь или мысли будут оценены!

Спасибо.

Answer 1

Без добавления компонентов в массив entryComponents модуля NgModule можем ли мы добавлять компоненты динамически?(Я знаю другой как ComponentResolverFactory).Есть что-нибудь еще?

Вы можете лениво загружать модули, в которых есть компоненты (виджеты).Но это тесно связано с системой маршрутизации.Итак, вы должны перейти к ленивым загрузочным модулям

пример маршрута:

{
   path: 'lazy-load-path',
   loadChildren: 'path/to/lazy#Module'
}

Поскольку приложение является SPA, его можно настроить.Например,

Когда пользователь попадает на страницу, он видит несколько виджетов, которые он может настроить.Если он хочет, он может добавить больше виджетов из Магазина

Итак, чтобы добавить больше виджетов для хранения:

1. Создать <router-outlet> в шаблоне текущей страницы

   current-page.template:

   ....
   <router-outlet></router-outlet>
   ...
   

2. Настройка маршрута текущей страницы

   current-module.routing.ts:

   {
      path: 'current-page',
      component: 'CurrentComponent',
      children: [
        {
           path: 'lazyModule1', 
           loadChildren: 'path/to/lazy#Module1'
        },
        {
           path: 'lazyModule2',
           loadChildren: 'path/to/lazy#Module2'
        }
       ....
      ]
   }
   

   Каждый ленивый модуль будет состоять из нескольких виджетов.Поскольку текущая страница имеет router-outlet, ленивые компоненты модуля будут размещены здесь как дочерние.

3. Если он пожелает, он может добавить больше виджетов из Магазина

   Для добавления виджетов в current-page-component необходимо перейти к lazyModule1 / lazyModule2.И это тривиальная задача.Навигация по шаблону routerLink или по классу ввода компонентов Router и router.navigate('lazyModule1') ...