Sitemap
SD Tidbits

Brief writings on nifty Software Development

Entry Components

Angular

2 min readFeb 25, 2022

--

Press enter or click to view image in full size
Photo by Pixabay from Pexels

As of Angular 9, entry components are deprecated — but still supported*. This includes the entryComponents array in an NgModule.

Why do we care?

Entry components are the components that an Angular app loads imperatively by type — not referenced in a template. Those referenced in a template are loaded declaratively by type.

Pre-Ivy, these components would be specified by:

  • bootstrapping them in NgModules using the bootstrap property
  • including them in route definitions (if applicable)
  • declaring them explicitly in the entryComponents array in NgModules

Bootstrapped components are loaded into the DOM during the bootstrap process — app initialization.

Get B. Chepkorir’s stories in your inbox

Join Medium for free to get updates from this writer.

Route definition components are those included in route definitions. They are also loaded imperatively by type. All route components must be entry components.

Angular automatically added bootstrap components and route definition components as entry components.

However, if an app bootstrapped or loaded a component dynamically and imperatively by type, you had to add it to the entryComponents array explicitly. For example, a lazy loaded component that was not being referenced in a template.

Why are entry components so important?

Performance — to attain a smaller Angular app bundle size in production, the compiler would only generate code for the special components that were reachable from the entryComponents array.

*you might still need them for Angular libraries.

--

--