Typescript 2.0 and Webpack importing of HTML as string

Question

I'm trying to import a HTML file as string with the help of webpack (Currently using webpack because TypeScript 2.0 doesn't support async/await on non ES6 targets).

The problem I have is, even if the html-loader version from github supports a config flag 'exportAsEs6Default' i don't get it to set correctly. Is there any way to set a loader options globally? Because if I add the html-loader to the loaders section in the config file the loader is called twice causing the content to be nested.

---

I have the following definition file to support importing of HTML (like in the example on the modules documentation)

declare module "html!*" {
    const content: string;
    export default content;
}

The corresponsing import statement:

import templateString from "html!./Hello.html";

The versions of the packages I use:

"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"html-loader": "git://github.com/webpack/html-loader.git#4633a1c00c86b78d119b7862c71b17dbf68d49de",
"ts-loader": "^0.9.5",
"typescript": "2.0.3",
"webpack": "^1.13.2"

And the webpack config file

"use strict";

module.exports = {
    entry: "./WebApp/Hello.ts",
    output: {
        path: "./wwwroot/compiled",
        filename: "app.bundle.js"
    },
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".js", ".ts"]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: "babel-loader!ts-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    }
};

Zandrazandt

Answer 1

So after some tinkering I found a way to get this done. As i didn't want to add a 'exportAsEs6Default' query parameter to every import statement, I changed from an explicit loader for html to a configured loader.

I'll leave this question open in case someone knows a better way, as currently I'm not sure if I'm all to happy with this way (something native to typescript would be find without the need of a loader), but maybe it will help others facing the same problem.

---

So the import statement from the example above changed to

import templateString from "./Hello.html";

Together with an updated definition file

declare module "*.html" {
    const content: string;
    export default content;
}

And the webpack config file changed to this:

"use strict";

module.exports = {
    entry: "./WebApp/Hello.ts",
    output: {
        path: "./wwwroot/compiled",
        filename: "app.bundle.js"
    },
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".js", ".ts", ".html"]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: "babel-loader!ts-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: "html-loader?exportAsEs6Default"
            }
        ]
    }
};

No change to the used packages.

Zandrazandt

For anyone trying to use this it worked well for me AFTER I used the specific commit number of html-loader listed in the package.json. Turns out at the time of this writing html-loader's last release wasn't since Feb of 2016. So even if you are on "latest" and the docs seem to specify you can use "exportAsEs6Default" you can't unless you use the specific commit listed above or one after. – Ferminafermion

i am trying this, but I just get ` Invalid module name in augmentation, module '*.html' cannot be found.` – Jaramillo

I'm no longer using this setup with my projects, do you have a simplified sample project you can share on github? I can give it a quick look if you want. – Zandrazandt

My project is quite large, I am trying to change templateUrl to template. – Jaramillo

I will see if I can build something, with enough to get this problem. – Jaramillo

adding @types/requirejs to npm and then using require('html-loader!./community-nav-widget.html') has worked. I don't think this is the right way to do it, but it will work until I can figure out how to use typescript. – Jaramillo

It seems the declaration must reside in an d.ts file, I moved the declaration to an htmlimp.d.ts file and referenced it using /// <reference path="htmlimp.d.ts"/> – Zandrazandt

Okay. I will give that a try and let you know. – Jaramillo

Just gave this a try, and it has seemed to work. Thank you. – Jaramillo