Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to import an HTML file as a string with TypeScript?

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?

like image 655
Vassilis Pits Avatar asked Apr 15 '16 14:04

Vassilis Pits


People also ask

Can I use HTML in TypeScript?

To create an HTML element in TypeScript: Use the document. createElement() method to create the element. Set any properties or inner html on the created element.

How do I import a text file into TypeScript?

Use the readFile() Function in TypeScriptCopy import * as fs from 'fs'; const fileName: string = 'example. txt'; Use the readFile method, as shown in the following. Copy fs.


2 Answers

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 }) 
like image 77
Veikedo Avatar answered Oct 10 '22 11:10

Veikedo


@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 }) 
like image 33
isolationism Avatar answered Oct 10 '22 11:10

isolationism