angular2 include external html template

Question

Is there a way to include an external html file, I've been unable to use templateUrl, it keeps appending the base to the start of the url.

@Component({
  selector: 'enroll-header',
  templateUrl: 'http://blank.blank.com/somecool.html'
})

it'll try to find it at "./http://blank.blank.com/somecool.html"

and fail

You might be looking for [ComponentFactoryResolver](https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html) which includes links to a plnkr and downloadable code. — ccpizza, Apr 17 '17 at 10:07

score 3 · Accepted Answer · edited May 23 '17 at 11:47

Using an external URL in templateURL is not supported (possibly because it exposes you to security risks). As a workaround you can use a template with your component that binds to and displays a single variable. Then you can set the variable equal to the html you want to render. Please check these two similar SO questions:

score 2 · Answer 2 · answered Feb 14 '17 at 20:35

2

I believe all of the templateUrl are relative to the root of your application, so I don't think this would work.

answered Feb 14 '17 at 20:35

chrispy

3,552
1
11
19

score 0 · Answer 3 · answered Mar 08 '17 at 00:47

0

I ended up using a scrape job to get the new html files, and then addded a serverside include command in my index.html file to append them.

answered Mar 08 '17 at 00:47

rich green

1,143
4
13
31

score -1 · Answer 4 · edited Aug 07 '18 at 12:36

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

@Directive({ selector: 'ngInclude' })
export class NgIncludeDirective implements OnInit {

@Input('src')
private templateUrl: string;
@Input('type')
private type: string;

constructor(private element: ElementRef, private http: Http) {

}
parseTemplate(res: Response) {
    if (this.type == 'template') {
        this.element.nativeElement.innerHTML = res.text();
    } else if (this.type == 'style') {
        var head = document.head || document.getElementsByTagName('head')[0];
        var style = document.createElement('style');
        style.type = 'text/css';
        style.appendChild(document.createTextNode(res.text()));
        head.appendChild(style);
    }
}
handleTempalteError(err) {

}
ngOnInit() {
    //Loads the HTML and bind it to the view
    this.
        http.
        get(this.templateUrl).
        map(res => this.parseTemplate(res)).
        catch(this.handleTempalteError.bind(this)).subscribe(res => {
            console.log(res);
        });
}

}

angular2 include external html template

4 Answers4

Linked

Related