Question

现在有一个共同的角度组件（指令）：模块B

├──base.scss

├──index.js

└──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

接下来，使用webapp中的组件作为webapp中的依赖项，如，

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

在webapp中使用B：

<B></B>

运行时，webapp会抛出一个异常，为什么以及如何修复它，谢谢：

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)

angular + webpack：错误：[$ compile：tpload]无法加载模板

0 个答案: