title: Angular lazy loading dynamic component
body: <p>Using Angular 4.1.3, I'm working on a mapping application which lazy-loads various tool modules. Currently, there is a router-outlet, which places the tool within the map. However, I need to support placing the tool in a new tab, next to the map. The tab is dynamically created in response to loading the tool module, and there can be multiple tabs open simultaneously.</p>
  
  <p>Creating a tab component is simple enough, and it seems like putting a dynamic component loader in the new tab (<a href="https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html" rel="noreferrer">https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html</a>), is a reasonable way to place the tool in the tab. However, I have no idea how to actually get a reference to the tool's component for passing it to the loader, since it's part of a lazy-loaded module. Is there a way to have the router pass this to my app.component instead of outputting it via a router-outlet? I've thought about putting the router-outlet in a hidden div and then binding to it in the controller, but that seems hacky, and I'm not sure it would work.</p>
  
  <p>Some similar questions/answers I've seen seemed to depend on SystemJS, but I'm using Webpack.</p>
  
  <p>EDIT: I got a basic plunker running here: <a href="http://plnkr.co/edit/RPbyQZ4LyHN9o9ey2MJT?p=preview" rel="noreferrer">http://plnkr.co/edit/RPbyQZ4LyHN9o9ey2MJT?p=preview</a></p>
  
  <p>The code there has a very basic component dynamically added to a tab</p>
  
  <pre><code>  export class ContentPaneComponent implements OnInit {
    @ViewChild('contentpane') el: ElementRef;
  
    @Output() newContent: EventEmitter&lt;any&gt; = new EventEmitter();
  
    private content: string;
    private contentSubscription: Subscription;
  
    private tab1 = new CompItem(htmlPaneComponent, {});
    // private tab2 = new CompItem(LayerManagerComponent, {});
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  
  <p>the component which is specified in tab1 has to be included in the entrycomponents of content-pane.module <code>entryComponents: [htmlPaneComponent]</code></p>
  
  <p>Ultimately, I want to be creating new <code>CompItem()</code>s when modules are lazy-loaded. When I activate a route such as:</p>
  
  <pre><code>{
      path: 'search', loadChildren:
      'components/conference-room-search/conference-room-search.module#ConferenceRoomSearchModule'
          }
  </code></pre>
  
  <p>I think what I need is for the router to give me a reference to the module or its components.</p>