How to import .html fragment using es6 syntax in T

Question

How to import an HTML template from a relative path like this:

import customSelectHtml from "./custom-select.html!text";

TypeScript compiler complains that it cannot find module. I was trying to create an ambient module definition, but it doesn't allow relative paths in module names. I am using SystemJS as a module loader.

Answer 1

I'm not using typescript, but I do use ES6. Might be useful for you.

The way that I solve this is by declaring template strings using ` ` quotes. It works fine for me, I would be happy to know if someone thinks this is a bad habbit.

below a snippet with Angular(-ui-router).

index.js

var indexTemplate = `
<div>
    <h1>{{ Index page }}</h1>
</div
`

export {indexTemplate}

config.js

import { indexTemplate } from './index.js'

function config($stateProvider){
    $stateProvider.state('index', {
        url: '/',
        controller: 'indexController',
        template: indexTemplate
    })
}

For completeness, this assumes indexController is defined elsewhere. Also, this config function is exported to a place where app is defined. But that all is not related to the question.

Answer 2

I don't know about SystemJS, but this is definitely possible with Webpack and the html-loader

Answer 3

You can import it using require syntax

1) Create app.d.ts file and require definition so typescript know this is function. (you don;t need to add any addition library, systemJs support require syntax)

declare function require(params:string): any;

2) Now you can import your html using var template = require('./custom-select.html!text')

I found it even better because you can use require inline

var directive = {
   template: require('./custom-select.html!text'),
   scope: {}
}

Answer 4

It is impossible.

Due to the definition of what is module in typescript, and as far as I know in ES6 javascript (import). Module cannot be html. The common approach is to import a javascript module that exports a string containing html, css, whatever. But that is not importing of the file with raw html.

Maybe you want to have a look at html imports also, but that is completely different thing.