title: Dynamically creating lazy loaded components in angular-2
body: <p>We're hosting an angular2 app within a cms (Sitecore), we have a requirement that the content editors can add, remove and reorder components of our app within a page, they can also add other components as desired.</p>
  
  <p>We do this by having the cms generate script tags to load our components. An example of generated html is:</p>
  
  <pre><code>&lt;body&gt;
      &lt;sales-root&gt;&lt;/sales-root&gt;
      &lt;script type="text/html" id="generated-header"&gt;
          &lt;sales-welcome&gt;&lt;/sales-welcome&gt;
      &lt;/script&gt;
      &lt;script type="text/html" id="generated-content"&gt;
          &lt;sales-personal-info&gt;&lt;/sales-personal-info&gt;
          &lt;div&gt;&lt;!-- regular html content --&gt;&lt;/div&gt;
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In the <code>sales-root</code> component we have</p>
  
  <pre><code>export class AppComponent extends Translation implements OnInit {
      @ViewChild('header', { read: ViewContainerRef }) headerRef;
      @ViewChild('content', { read: ViewContainerRef }) contentRef;
  
      ngOnInit() {
          this.loadSitecorePlaceholders(this.headerRef, 'generated-header');
          this.loadSitecorePlaceholders(this.contentRef, 'generated-content');
          // ...
      }
      private loadSitecorePlaceholders(containerRef: ViewContainerRef, placeholder: string) {
          // get the generated components listed from the sitecore placeholder
          const generatedContent = this.elementRef.nativeElement.parentNode.children[placeholder];
          if (generatedContent === undefined) { return; }
          if (containerRef === undefined) { return; }
  
          this.createComponentService.createComponentsFromHtml(containerRef, generatedContent.innerText);
  
          // we've finished creating all the components we need, remove the nodes created by sitecore.
          this.elementRef.nativeElement.parentNode.removeChild(generatedContent);
      }
  }
  </code></pre>
  
  <p>Within <code>CreateComponentService</code> we have intialise an array of allowable component factories, and a generic htmlHost component factory:</p>
  
  <pre><code>this._selectableFactories = creatableComponents
      .map((component: Type&lt;any&gt;) =&gt;
          this.componentFactoryResolver.resolveComponentFactory(component));
  </code></pre>
  
  <p>We parse the CMS generated script tag for selectors, and, if we find them we add the component, or we inject into the generic html component:</p>
  
  <pre><code>private createAngularComponent(
      container: ViewContainerRef,
      factory: ComponentFactory&lt;Type&lt;any&gt;&gt;,
      element: HTMLElement,
  ) {
      const selector = factory.selector.toLocaleLowerCase();
      container.createComponent(factory);
      // ...
  }
  
  private createHtmlComponent(container: ViewContainerRef, element: HTMLElement) {
      const component = container.createComponent(this.htmlHostFactory).instance;
      component.content = element.outerHTML;
  }
  </code></pre>
  
  <p>All this is working quite well, except for performance. We have many components and loading and compiling them all takes a while (3 to 4 seconds on a fast machine). We're tackling this in 2 ways:</p>
  
  <ol>
  <li>Moving to AOT rather than JIT. Proving to be problematic due to an internal library, but we're working through it.</li>
  <li>Lazy loading the components as they are required. We only ever require a subset of components on any page, so this should give us some gains.</li>
  </ol>
  
  <p>With #2 we need to have all the creatable components listed in <code>entryComponents</code> in the <code>@NgModule</code>, so they must all exist as it's generated... right? I'm also pre-loading the factories so I can find the selectors, but I could build that list in development. </p>
  
  <p>Ideally I'd have a dictionary of selectors to lazy component factory factories, first call would download the component and load it then inject it, this would happen post ngInit and would also give the appearance of a faster load.</p>
  
  <p>Is it possible to lazy load the components? So far all the examples I've seen are using the router and we aren't due to the dynamic composition.
  How?</p>