angular+webpack: Ошибка: [$compile:tpload] Не удалось загрузить шаблон

Question

Теперь есть общий угловой компонент (директива): модуль B

Base── base.scss

Index── index.js

Main── main.html

index.js:

require('./base.scss');
var template = require('./main.html');
angular.module('commonComponent').directive('B', function () {
    return {
        restrict: 'EA',
        templateUrl: template,
        link: function (scope, element, attr) {
            scope.name = 'test';
        }
    }
})

и затем я использую webpack + ngtemplate-loader (для html), чтобы упаковать компонент

(шаблон css и html будет упакован в dest.js);

ngtemplate-loader будет упаковывать HTML следующим образом:

angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);

html - это код шаблона в main.html

а также npm publish

затем используйте компонент в веб-приложении как зависимость в веб-приложении, например:

npm install B --save //the dest.js is injected to webapp
angular.module('webApp', ['wbgComponent']).run(function(...))

используйте B в веб-приложении:

<B></B>

при запуске веб-приложение выдаст исключение, почему и как это исправить, спасибо:

angular.js:11358 Error: [$compile:tpload] Failed to load template: main.html
http://errors.angularjs.org/1.3.0/$compile/tpload?p0=main.html
    at angular.js:80
    at handleError (angular.js:15773)
    at processQueue (angular.js:12914)
    at angular.js:12930
    at Scope.$eval (angular.js:14123)
    at Scope.$digest (angular.js:13939)
    at Scope.$apply (angular.js:14227)
    at done (angular.js:9493)
    at completeRequest (angular.js:9678)
    at XMLHttpRequest.requestLoaded (angular.js:9621)