Angular 1.5 component webpack template require () throws error

Question

I am using angular 1.5.3 with es6, webpack and jade patterns.

Everything works as expected, with the exception of component templates.

It works

var cmpnt = {
    template: '<div>test</div>'
}

This also works (when I manually create the html file)

var cmpnt = {
    template: require('./component.html')
}

This does not work

var cmpnt = {
    template: require('./component.jade')
}

In the browser console, I get

Error: [$injector:unpr] Unknown provider: localsProvider <- locals

The file .jadeexists, and I use the require('./template.jade')application in many other places without problems.

Any ideas? More information can I provide?

Answer 1

jade-loaderreturns a function. You cannot pass this function to the template, you must call the function before passing it

var cmpnt = {
    template: require('./component.jade')();
}

require