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

【问题标题】：Relative path not found when requiring a Angular component需要 Angular 组件时找不到相对路径
【发布时间】：2017-05-31 01:53:16
【问题描述】：

我正在使用 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 文件夹中搜索。

如何解决这个问题？

【问题讨论】：

标签： angularjs browserify bundling-and-minification commonjs

【解决方案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，例如

【讨论】：