Angular 8 Ленивая загрузка. Вопросы касательно: импорт, въезд, компоненты и провайдеры - PullRequest
Новая
       21

Angular 8 Ленивая загрузка. Вопросы касательно: импорт, въезд, компоненты и провайдеры

1 голос
/ 03 февраля 2020

я превысил отметку 2 МБ некоторое время go, поэтому я решил использовать отложенную загрузку, чтобы справиться с моими здоровенными партиями. Поэтому у меня есть вопросы, касающиеся импорта, entryComponents и поставщиков. Чтобы объединить их все в один вопрос:

Что я импортирую в app-routing.module.ts и что импортирую в login-routing.module.ts

с тех пор, как я использую:

  • angular модулей
  • angular материальных модулей (матовые диалоги, следовательно, компоненты ввода)
  • многочисленные услуги (только некоторые вызываются во всех компонентах)
  • другие npms

Это мой app-routing.module.ts: 

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: '/login'
      },
      {
        path: '**',
        component: LoginComponent
      },
      {
        path: 'login',
        loadChildren: () => import('./account/login/login.module').then(m => m.LoginModule)
      }
    ]
  }
@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Это мой логин-routing.module.ts: 

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LoginRoutingModule { }

1 Ответ

1 голос
/ 03 февраля 2020

Это одна из тех вещей, где это зависит от вашего варианта использования. Чтобы уменьшить размеры комплектов, в идеале вы толкаете все как можно ниже в дереве модулей. Таким образом, в вашем App.Module будет очень мало, и большинство ваших компонентов импорта / декларации / провайдеров / записей будут в вашем функциональном модуле. Это может включать в себя не внедрение ваших услуг в root, если вам не нужно, и вместо этого настройку их в массиве поставщиков функциональных модулей.

Однако есть некоторые компромиссы, которые необходимо учитывать. Например, в идеале с вашими Angular материальными модулями вы должны импортировать их в свои функциональные модули, но если у вас будет много функциональных модулей, будет немного неприятно иметь go в модуле и добавьте импорт для каждого модуля материала, который вам нужен в вашем функциональном модуле. С другой стороны, для вашего модуля входа в систему вам, скорее всего, понадобится всего несколько материальных модулей, в то время как для всего вашего приложения может понадобиться куча их. все как можно глубже в дерево модулей. Просто имейте в виду, что вы легко наносите удар по простоте разработки.

Итак, для вещей, которые вы упомянули (Angular Модули, Angular Модули Материалов, Сервисы, другие NPM), вы хотели бы поместить их sh как можно ниже в дерево модулей. , Имейте в виду, что для сервисов Singleton они потребуются в вашем app.module, чтобы они оставались сервисами Singleton. Если вы переместите их в массив поставщиков в функциональных модулях, то все они получат свой собственный экземпляр. Еще одним ярким примером является HttpClientModule, который вы хотите импортировать только один раз в root.

...