What is the difference between declarations and entryComponents

Question

I have this in my app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { HttpModule, Http } from '@angular/http'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { EliteApi } from '../shared/shared'; import { MyApp } from './app.component'; import { MyTeams, Tournaments, TeamDetails, Teams, TeamHome, Standings } from '../pages/pages';  import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen';  @NgModule({     declarations: [         MyApp,         MyTeams,         TeamDetails,         Tournaments,         Teams,         TeamHome,         Standings     ],     imports: [         BrowserModule,         IonicModule.forRoot(MyApp),         HttpModule     ],     bootstrap: [IonicApp],     entryComponents: [         MyApp,         MyTeams,         TeamDetails,         Tournaments,         Teams,         TeamHome,         Standings     ],     providers: [         HttpModule,         StatusBar,         SplashScreen,         { provide: ErrorHandler, useClass: IonicErrorHandler },                 EliteApi     ] }) export class AppModule { } 

At the moment my declarations and entryComponents both are exactly the same. They contain all of the page/components that I built for my app. If I remove any entry from any of the properties I get error in angular2.

My question is if they are always the same then what is the need for these properties? I think I am definitely missing some point here. When would entryComponents and declaractions be different from one another?

Answer 1

The entryComponents array is used to define only components that are not found in html and created dynamically with ComponentFactoryResolver. Angular needs this hint to find them and compile. All other components should just be listed in the declarations array.

Here's the documentation on angular site