title: Access TemplateUrl using variable Angular2
body: <p>I am creating a directive in VSCode Editor which loads a html page on specifying a given path:</p>
  
  <p>Below is the code for same:</p>
  
  <pre><code>@Directive({
  selector: 'html-outlet'
   })
  
  export class HtmlOutlet {
  @Input() html: string;
  
  constructor(private vcRef: ViewContainerRef, private compiler: Compiler) { }
  
  ngOnChanges() {
      const html = this.html;
      if (!html) return;
  
      @Component({
          selector: 'dynamic-comp',
          templateUrl: html
      })
      class DynamicHtmlComponent { };
  
      @NgModule({
          imports: [CommonModule],
          declarations: [DynamicHtmlComponent]
      })
      class DynamicHtmlModule { }
  
      this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
          .then(factory =&gt; {
              const compFactory = factory.componentFactories.find(x =&gt; x.componentType === DynamicHtmlComponent);
              const cmpRef = this.vcRef.createComponent(compFactory, 0);
          });
  }}
  </code></pre>
  
  <p>However I keep getting below error:
  ERROR in ./src/client/app/shared/directives/html-outlet.directive.ts
  Module not found: Error: Can't resolve ' html' in 'D:\ccw-dev\newnewclient\src\client\app\shared\directives'</p>
  
  <p>The same code however works  fine in plunker
  <a href="https://plnkr.co/edit/l8BwjGIMC5tUVjIeh4u4?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/l8BwjGIMC5tUVjIeh4u4?p=preview</a></p>
  
  <p>I am wondering what wrong i am doing. I am on angular 5.2.6 version in my VScode solution.</p>