Размещение компонентов в массиве объявлений, а также в массиве entryComponents

Question

Когда я создаю новый компонент страницы, мне теперь нужно разместить его в объявлениях, а также в массиве entryComponents. Почему это должно быть в обоих местах?

Например, я только что создал новый файл login.page.ts, но я должен объявить его как в декларации, так и в массиве entryComponents (кстати, это не entryComponent, так сказать)

app.module.ts

@NgModule({
  declarations: [
    MyApp,
    LoginPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Answer 1

Причина для entryComponents хорошо объяснено в этой записи блога:

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

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

Итак, как вы можете видеть, у нас есть некоторое дублирование, где мы должны определить наши компоненты Page как в объявлениях, так и в entryComponents разделы. Причина того, что это отдельное entryComponents раздел так, что Angular может скомпилировать пакет для приложения, который будет включать только те компоненты, которые фактически используются в приложении.

По крайней мере, мы можем попытаться избежать дублирования кода. В аннотациях не так много свободы для динамического кода. Пытаюсь сгенерировать entryComponents используя выражение вроде

const myComponents = [
  MyComponent
]
const myPages = [
  MyApp,
  LoginPage
]
@NgModule({
 entryComponents: myComponents.concat(myPages),
 /* ... */
})

приведет к:

Error: Error encountered resolving symbol values statically. 
 Function calls are not supported. 
 Consider replacing the function or lambda with a reference to an exported function

Попытка использовать экспортированную функцию, как это

export function getEntryComponents() { return [ /* ... */ ] }

@NgModule({
 entryComponents: getEntryComponents,
 /* ... */
})

результаты в:

Error: Error encountered resolving symbol values statically.
 Expression form not supported

К счастью, есть решение. Вы можете использовать оператор распространения массива здесь:

@NgModule({
  declarations: [
    ...myComponents,
    ...myPages
  ],
  entryComponents: myPages
 /* ... */
})

Answer 2

Размещение entryComponent действительно не требуется, если остальная часть вашего приложения настроена правильно.

Angular автоматически добавляет определенные компоненты к компонентам ввода. Компоненты, перечисленные в @NgModule.bootstrap добавляются автоматически. Компоненты, указанные в router configuration добавляются автоматически. Эти два механизма составляют почти все входные компоненты.

Если ваше приложение загружается или динамически загружает компонент по типу каким-либо другим способом, вам придется явно добавить его в entryComponents.

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

От: https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html