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"
            }
        ]
    }
};

score 21 · Accepted Answer · answered Oct 29 '16 at 01:51

21

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.

answered Oct 29 '16 at 01:51

Fionn

10,975
11
54
84

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. – zach Jan 10 '17 at 20:22
1

i am trying this, but I just get ` Invalid module name in augmentation, module '*.html' cannot be found.` – JonathanPeel Jun 17 '17 at 10:13
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. – Fionn Jun 17 '17 at 10:51
My project is quite large, I am trying to change `templateUrl` to `template`. – JonathanPeel Jun 17 '17 at 11:07
I will see if I can build something, with enough to get this problem. – JonathanPeel Jun 17 '17 at 11:08
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. – JonathanPeel Jun 17 '17 at 13:22
1

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 /// – Fionn Jun 17 '17 at 13:58
Okay. I will give that a try and let you know. – JonathanPeel Jun 18 '17 at 08:18
Just gave this a try, and it has seemed to work. Thank you. – JonathanPeel Jun 26 '17 at 09:28

Typescript 2.0 and Webpack importing of HTML as string

1 Answers1