angular+webpack:Error: [$compile:tpload] Failed to load template

Question

now there is a common angular component(directive) :module B

├── base.scss

├── index.js

└── main.html

the 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';
        }
    }
})

and next, i use webpack + ngtemplate-loader (for html)to package the component

(the css and html template will be packaged to a dest.js);

ngtemplate-loader will package the html like this:

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

the html is the template code in main.html

and npm publish

next, use the component in a webapp as a dependence in a webapp, e.g.,

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

use B in webapp:

<B></B>

when running, the webapp will throw a exception,why and how to fix it,thanks:

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)