I’m having trouble requiring a HTML file for Angular templating

Here is my code

template = require('./hello.html')
console.log(template)

Here is hello.html

<p>Hello from hello.html</p>

Here is my watcher

Hash: 3bb8cf771cd0222f43fe
Version: webpack 1.1.5
Time: 1778ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1057834       0  [emitted]  main       
   [0] ./entry.coffee 235 {0} [built]
   [1] ./app/app.coffee 217 {0} [built]
   [2] ./math/multiply.coffee 100 {0} [built]
   [3] ./hello/helloController.coffee 387 {0} [built] [1 error]
   [4] ../bower_components/lodash/dist/lodash.js 229855 {0} [built]
   [5] ./hello/hello.html -1 [built] [failed]
   [6] ../bower_components/angular/angular.js 796257 {0} [built]
   [7] ./math/style_side_effect.styl 485 {0} [built]
   [8] /usr/local/webprojects/webpack/app/~/css-loader!/usr/local/webprojects/webpack/app/~/stylus-loader!./math/style_side_effect.styl 92 {0} [built]
   [9] /usr/local/webprojects/webpack/app/~/style-loader/addStyle.js 715 {0} [built]
  [10] (webpack)/buildin/module.js 251 {0} [built]

ERROR in ./hello/hello.html
Module parse failed: /usr/local/webprojects/webpack/app/public/module/hello/hello.html Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <p>Hello from hello.html</p>
| 
 @ ./hello/helloController.coffee 6:11-34

Here is my package.json

{
  "name": "Phalcon-Angular",
  "version": "0.0.1",
  "devDependencies": {
    "webpack": "~1.1.x",
    "webpack-dev-server": "~1.2.7",
    "coffee-script": "~1.7.1",
    "coffee-loader": "~0.7.1",
    "style-loader": "~0.6.3",
    "less-loader": "~0.7.2",
    "sass-loader": "0.0.2",
    "css-loader": "~0.6.12",
    "stylus-loader": "~0.2.0",
    "html-loader": "~0.2.2",
    "exports-loader": "~0.6.2",
    "file-loader": "~0.5.1"
  }
}

Here is my webpack.config.js

    resolve: {
...
        extensions: [
            '',
            '.js', '.coffee',
            '.html',
            '.css', '.styl', '.scss', '.less'
        ]
...
    },
    module: {
        loaders: [
            // Exports Angular
            { test: /[\/]angular\.js$/, loader: "exports?angular" },
            // Script Loaders
            { test: /\.coffee$/, loader: "coffee" },

            { test: "\.html$/", loader: "html" },

            // Style Loaders, style! inlines the css into the bundle files
            { test: /\.css$/, loader: "style!css" },
            { test: /\.scss$/, loader: "style!css!sass" },
            { test: /\.less$/, loader: "style!css!less" },
            { test: /\.styl$/, loader: "style!css!stylus" }
        ]
    }

I’m looking for a simple way to be able to retrieve HTML as strings. I thought that the html-loader would do this.

Author: Fantashit

1 thought on “I’m having trouble requiring a HTML file for Angular templating

  1. Your html-loader configuration is wrong:

    This line

    { test: "\.html$/", loader: "html" },

    should look like this

    { test: /\.html$/, loader: "html" },

    test is a regular expression.

Comments are closed.