1

现在有一个共同的角度组件（指令）：模块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 (for 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)
4

0 回答 0