Is It Possible To Import An Html File As A String With Typescript?
Solution 1:
You can do this now:
import"template.html";
@Component({
selector: 'home',
directives: [RouterLink],
template: require("template.html"),
})
this will include "template.html" to the dependencies list of your component and then you can bundle it with your builder (actually, it makes more sense with amd
)
However, as you were suggested, it's better to use webpack
.
Take a look at this starter pack
UPDATE now you can declare an html
module like so:
declaremodule"*.html" {
constcontent: string;
exportdefault content;
}
and use it like so:
import * as template from"template.html";
@Component({
selector: 'home',
directives: [RouterLink],
template: template
})
Solution 2:
@Veikedo's answer above almost works; however the * as
portion means that the entire module is assigned to the pointer template
whereas we only want the content. The compiler error looks like this:
ERROR in /raid/projects/pulse/angular-components/src/lib/card/card.ts (143,12): Argument of type'{ moduleId: string; selector: string; template: typeof '*.html'; encapsulation: ViewEncapsulation...' is not assignable to parameter of type'Component'.
The corrected import statement (at the time of writing, using TypeScript 2.3.3) is as follows:
import template from"template.html";
@Component({
selector: 'home',
directives: [RouterLink],
template: template
})
Solution 3:
Easiest answer:
Use: templateUrl
Example:
@Component({
selector: 'home',
directives: [RouterLink],
templateUrl: './template.html',
})
Note: the .html file have to be in the same component folder or you have to modify your path
Post a Comment for "Is It Possible To Import An Html File As A String With Typescript?"