Angular: Understanding AOT and Dynamic Components

  • this.viewContainerRef.createComponent(compFactory); And that’s all there is to it from the Library Component side of things – we find the factory for the Component, and then create a new instance of the Component.
  • From the application side of things, the first thing we need to do is create the components we want to use in the Library – these can be any valid Angular Component.

‘, }) export class BlueDynamicComponent { } All these components do is display a little styled text.

  • For this to work we need to tell Angular’s AOT Compiler to create factories for the user provided Components, or ComponentFactoryResolver won’t find them.

  • @AngularBeers: Understanding #AOT and Dynamic Components #Angular

    This is a guest post from Sean Landsman at ag-Grid. Sean is the lead engineer on ag-Grid’s Angular integration. — Stephen Fluin

    ag-Grid is an enterprise datagrid that works with Angular. As ag-Grid works with many frameworks, the internals of the grid had to allow for Angular rendering inside the grid despite ag-Grid not being written in Angular itself. This was done using Angular Dynamic Components and we managed to do it while still supporting AOT. This blog details what we learnt along the way.

    To explain we present a simple sample application that isolates what we are trying to do. In our example below we are going to develop two main Modules – one will be a Library (in our case this was ag-Grid) that will display an array of dynamically created Components (similar to how ag-Grid displays Angular components inside the grid’s cells), and the other will be our actual Application.

    The end result will be look like this:

    You can find all the code for this example over at GitHub, and the live example over at

    One further note – when we return to “user” below, we are referring to a user (or client) of the Library we’re writing.

    doesn’t have any content of its own – all it does is serve up the user supplied Component. The important part of this Component are these two lines:

    for the provided Component. We’ll use this factory next to create the actual component:

    won’t find them. We can make use of

    for this – this will ensure that the AOT compiler creates the necessary factories, but for you purposes there is an easier way, especially from a users perspective:

    entry dynamically, in a user friendly way.

    The speed and size of the resulting application when using AOT can be significant. In our ag-grid-ng2-example project, we estimate the size of the resulting application went from 3.9Mb down to 2.4Mb – a reduction of just under 40%, without optimising for size or being particularly aggressive with rollup.

    Angular: Understanding AOT and Dynamic Components