title: Recursive directives in angular 5 Dynamic modules (without circular dependencies)
body: <p>I am trying to load dynamic templates into an angular 5 app.
  First try was the examples in the angular docs, <a href="https://angular.io/guide/dynamic-component-loader" rel="nofollow noreferrer">https://angular.io/guide/dynamic-component-loader</a> This was a dead end because all it does is load static components dynamically.</p>
  
  <p>Second up was a well informed blog post from the AngularInDepth.com Max NgWizard K
  <a href="https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e" rel="nofollow noreferrer">https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e</a></p>
  
  <p>This works like a charm to render templates dynamically. I have, however, hit a snag trying to wire my dynamic components to do recursive calls or even load common modules.</p>
  
  <p>Looking around stackoverflow most of the answers are outdated with plunkers that are not working and the few that work don't really solve circular dependencies issue or even load modules apart from interpolations that is already working in my case.</p>
  
  <p>I have forked an angular docs project to demonstrate the issue <a href="https://stackblitz.com/edit/angular-aa3ah1?file=src%2Fapp%2Fheroes%2Fheroes.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-aa3ah1?file=src%2Fapp%2Fheroes%2Fheroes.component.ts</a></p>
  
  <pre><code>import { Component, OnInit, Input, ViewChild, Compiler, NgModule } from '@angular/core';
  import { ViewContainerRef } from '@angular/core';
  import { Portal } from './portal'
  import { SharedModule } from './shared.module'
  @Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
  })
  export class HeroesComponent implements OnInit {
  
    @Input() msg: any;
    @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
  
  
    templates = [//interpolation works without a problem
                  `&lt;span&gt; 
                    This works:  {{msg.comment}}
                  &lt;/span&gt;`,
                  // How to import a directive in the template?
                  `&lt;span *ngFor="let comment of msg.childComments"&gt; 
                    Directive :  {{comment.comment}}
                  &lt;/span&gt;`,
                  // How to reuse the portal without circular dependancies???
                  `&lt;span&gt; 
                    This does not work because app-heroes
                     is not accessible and importing module causes circular dependancies
                     {{msg.comment}}
                  &lt;/span&gt;
                  &lt;span *ngFor="let comment of msg.childComments"&gt;
                    &lt;app-heroes [msg]="comment"&gt;&lt;/app-heroes&gt;
                  &lt;/span&gt;
  
                  `];
  
    constructor(private _compiler: Compiler) { }
  
    ngOnInit() {
      this.loadTemplate(this.templates[0], this.msg, this.vc, this._compiler);
    }
  
    loadTemplate(myTemplate: string, data: any, vc: ViewContainerRef, compiler: Compiler){
      const portal = Component({template: myTemplate})(Portal);
      //const pModule = NgModule({declarations: [portal], imports: [HeroesComponent]})(class{});
      const pModule = NgModule({declarations: [portal], imports: [SharedModule]})(class{});
  
      compiler.compileModuleAndAllComponentsAsync(pModule)
          .then((factories) =&gt; {
          const f = factories.componentFactories[0];
          const cmpRef = vc.createComponent(f);
          cmpRef.instance.msg = data;
      });
    }
  }
  </code></pre>
  
  <ol>
  <li>How can i get the common modules to work in my dynamic components (template[1])?</li>
  <li>How can i reuse the dynamic component to make recursive directives (template[2])? </li>
  </ol>