Angular + Webpack: Why is better to templte:require(file.html) than to specify it with a templateUrl

Question

I saw several tutorials that are using this kind of notion to load html templates with Angular, like:

$stateProvider.state('stateName', {
   url: 'someState',
   template: require('localFile.html')
}

instead of:

$stateProvider.state('stateName', {
   url: 'someState',
   templateUrl: '/path/to/localFile.html'
}

My guess was that the templateUrl make the page do an AJAX call to require this page (I really not sure why it needs to do it).

Is it really better (performance-wize) and if so - why?

Answer 1

It looks like template: require('localFile.html') relies on RequireJS to load templates; templateUrl: '/path/to/localFile.html' is a built-in way to load a template.

Both versions support lazy loading and caching, so my guess is that there is no significant difference — if you already have RequireJS in your Angular app, you may prefer to use it for loading templates; otherwise, you can use built-in Angular functionality.