how to pass templateUrl as a varible in angular2?

Question

I have followed this link How to use variable to define templateUrl in Angular2, but I am getting error:

ERROR Error: Cannot find module "." at webpackMissingModule (html-outlet.ts:26) [angular] at HtmlOutlet.ngOnChanges (html-outlet.ts:26) [angular] at checkAndUpdateDirectiveInline (core.es5.js:10756) [angular] at checkAndUpdateNodeInline (core.es5.js:12137) [angular] at checkAndUpdateNode (core.es5.js:12105) [angular] at debugCheckAndUpdateNode (core.es5.js:12734) [angular] at debugCheckDirectivesFn (core.es5.js:12675) [angular] at Object.eval [as updateDirectives] (StaticContentComponent.html:3) [angular] at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12660) [angular] at checkAndUpdateView (core.es5.js:12072) [angular]
at callViewAction (core.es5.js:12387) [angular] at execComponenter code hereentViewsAction (core.es5.js:12333) [angular] at checkAndUpdateView (core.es5.js:12078) [angular]
at callViewAction (core.es5.js:12387) [angular]

My footer.html:

<div><a [routerLink]="['/aboutus']"> About</a> </div>

routing.ts

import { ModuleWithProviders } from '@angular/core';`enter code here`
import { Routes, RouterModule } from '@angular/router';
import { StaticContentComponent } from '../common/footer/staticcontent.component';

const routes: Routes = [
    { path: 'aboutus', component: StaticContentComponent }
   ];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);



staticcontent.component.ts

import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ArticleService } from './article.service';
import { HtmlOutlet } from './html-outlet'
class Article {
  title: string;
  html: string;
}

@Component({  
  //selector: 'static_content',
  template: `
    <div>
      <html-outlet [html]="article?.html"></html-outlet>
    </div>
  `
})
export class StaticContentComponent{
  article: Article;  
  constructor(private articleService: ArticleService) { 
    alert();
    this.articleService.getArticle().subscribe(data => {
      alert('get');
      this.article = data;
      alert(data.html)
      console.log(data);
    })
  }

  ngOnInit(): void {

  }

}


html-outlet.ts

import {
  Component,
  Directive,
  NgModule,
  Input,
  ViewContainerRef,
  Compiler
} from '@angular/core';

import { CommonModule } from '@angular/common';

@Directive({
  selector: 'html-outlet' 
})
export class HtmlOutlet {
  @Input() html: string;

  constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {alert('htl'+this.html);}

  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 => {
        const compFactory = factory.componentFactories.find(x => x.componentType === DynamicHtmlComponent);
        const cmpRef = this.vcRef.createComponent(compFactory, 0);
      });
  }
}

Please help me...

add your code with question – Babar Hussain Mar 27 '17 at 10:23 — Babar Hussain, Mar 27 '17 at 10:23
@Bilal, I have edited my question – latha Mar 27 '17 at 11:04 — latha, Mar 27 '17 at 11:04

score 0 · Answer 1 · answered Mar 27 '17 at 11:31

0

staticcontent.component.ts

<html-outlet [html]="article?.html"></html-outlet>

article?.html in this code does not seem to be a valid templateUrl. Please check if it should be "article.html".

answered Mar 27 '17 at 11:31

Alok Jha

353
3
9

I used article.json file and fetched data from that json file. artcle.json { "title": "My first article", "html": "app/articles/first.html" } so article?.html giving "app/articles/first.html" – latha Mar 27 '17 at 13:20
Does replacing "article?.html" with "app/articles/first.html" work? – Alok Jha Mar 29 '17 at 11:19

how to pass templateUrl as a varible in angular2?

1 Answers1