angular 1.5 component template webpack require() causes error

Question

I'm using angular 1.5.3 with es6, webpack and jade templates.

Everything works as expected except for the component's templates.

This 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 .jade file exists, and I'm using require('./template.jade') in many other places of the app without problems.

Any ideas? Any more info I can provide?

Answer 1

jade-loader returns a function. You cannot to pass that function to template, you must to invoke the function before pass it

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

note the call of function after require