需要 Angular 组件时找不到相对路径

Question

我正在使用 Browserify 进行捆绑和 Angularjs 框架。场景是，我有一个 Angularjs 组件，它有一个指令定义为 -

var loginDirective = /*@ngInject*/ function(){
  return{
    templateUrl:'views/login/templates/loginComponent.html',
    link:function(scope,ele,attr){
    }
  }
};

当我运行组件单独使用 browserify 时，这非常有效。现在我有一个项目 "MyAPP"，我使用 NPM install 在项目的 node_modules 文件夹中获取这个组件。然后我需要这个组件并像这样在项目中包含 DI

var angular = require('angular');
require ('baseComponent');

module.exports = angular.module('mainComponent',['baseComponent'])

DI 工作正常，但我收到一条错误消息，提示无法找到组件 'views/login/templates/loginComponent.html'，因为它开始在我的项目 view 文件夹中搜索，而不是它自己的 view文件夹。

如何解决这个问题？

Answer 1

我认为常见的方法是将模板放入您的 JavaScript-Code 并手动将其加载到模板缓存中。像这样：

angular.module('mainComponent').run(function($templateCache) {
    var template = '<h1> LoginComponent </h1>';
    $templateCache.put( 'loginComponent.html' , template );
});

指令中的 templateUrl 应如下所示：

var loginDirective = /*@ngInject*/ function(){
   return{
      templateUrl: 'loginComponent.html',
      link: function(scope,ele,attr){
      }
   }
};

您可以在许多开源库中看到这一点，例如 ui-bootstrap、ui-grid，例如

需要 Angular 组件时找不到相对路径

Relative path not found when requiring a Angular component

commonjs

angularjs

browserify

bundling-and-minification