Stepan Suvorov Stepan Suvorov - 1 year ago 157
AngularJS Question

How can you compile angular templates with webpack?

The idea is to have 1 JS file out of all html files.
and after just to use it via require:

templateUrl: require('./views/user-list.html')

Could you share you experience please?
I was googling for it and found several loaders for webpack but not sure what to use.

Answer Source

I decided to use ng-cache loader for webpack together with ES2015 syntax: it means import from instead of require.

Part of my webpack config:

module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', include: APP },
      { test: /\.html$/, loader: 'ng-cache?prefix=[dir]/[dir]' },

and example of directive with template:

import avatarTemplate from './views/avatar.html';

const avatar = function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      user: '='
    template: avatarTemplate

export default avatar;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download