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:
declare module "*.html" {
const content: string;
export default 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
![Vassilis Pits](https://i.stack.imgur.com/4BrhY.png?s=256&g=1)
Vassilis Pits
Web enthousiast since the web init ;) Web developer since 2000.
Updated on December 15, 2020Comments
-
Vassilis Pits over 3 years
I wonder if it is possible to do as the title said.
For example let's say we are working on a Angular2 project and we want to avoid set the template as an external url in order to have less http requests. Still we don't want to write all the HTML within the component because maybe it's big enough or we want designers to work in different files than devs.
So here is a first solution:
File template.html.ts Transform a file to .ts to something like this:
export const htmlTemplate = ` <h1>My Html</h1> `;
Then in my component I can import it like this:
import { Component } from 'angular2/core'; import {RouteParams, RouterLink} from 'angular2/router'; import {htmlTemplate} from './template.html'; @Component({ selector: 'home', directives: [RouterLink], template: htmlTemplate, })
Actually this works perfectly but you are loosing the IDE HTML intelligence so this is bad for the designer/dev that creates the HTML templates.
What I'm trying to achieve is to find a way to import .html files and not .ts.
So is it possible to import an .html file as a string in TypeScript?
-
Joel Almeida about 8 yearswhat I've done to achieve this is using
require
with webpack, create an html file, and then usetemplate: require('component.html')
and it will be imported as a string. -
Vassilis Pits about 8 yearsYes that's an approach. Thanks though for your addition I'll play with it also and I'll let you know my thoughts.
-
brando about 8 yearsTho not quite the solution you are looking for, I use gulp-angular-embed-templates to embed html templates in my js classes at build time
-
Vassilis Pits about 8 yearsYeah that's truth I'm search a more "native" way to do it and also it's an academical question if I can say that.
-
-
Vassilis Pits about 8 yearsFor some reason I don't think this is correct. Import & require the file seems strange and not correct approach. Still though thanks for your answer, I'll test it out also.
-
Bryan Rayner about 7 yearsI am then getting "cannot find Module X" errors. Which version of typescript is this answer aimed at?
-
Veikedo about 7 years@BryanRayner see here github.com/Microsoft/TypeScript/wiki/…
-
crooksey almost 7 yearsHi @Veikedo using this structure now produces an error: "[ts] Argument of type '{ template: typeof ".html"; selector: string; }' is not assignable to parameter of type 'Component'. Types of property 'template' are incompatible. Type 'typeof ".html"' is not assignable to type 'string'." I have also tried to structure like this: gist.github.com/crooksey/1405d2377edde1c61dc320ad1e147d71 which compiles, but gives a browser error: "Error: No template specified for component AppComponent" have I missed anything or made an obvious mistake?
-
Veikedo almost 7 years@crooksey i think something wrong with your *.html module declaration. Could you show full code?
-
ChrisP over 4 years@velkedo when you create a "declare module" (.d.ts) file as described above what do you have to do to get TypeScript to include it?
-
Veikedo over 4 years@ChrisP I remember there was an option in tsconfig. You'd rather check it out here typescriptlang.org/docs/handbook/tsconfig-json.html