Question

重要编辑：

出于设计原因，我改变了结构中的一些内容，因此组件不再是一个独立的范围，而是为视图分配了一个新的控制器。无论如何同样的错误仍然存在，所以我会使用这个问题。下面的代码和说明。

旧说明

我有一个路径文件，我可以获取模板等等。两条theese路线使用一个完整的组件（一个形式，顺便说一句），里面有自己的控制器。

他们负责解决从API端点获取信息的一些服务承诺。

无论如何，当我将它们调用到控制器中时，任何解析函数都会出现以下错误：

结束旧说明

控制器现在进入传统的Angular控制器，绑定到路由器中的视图，但错误：Error: [$injector:unpr] Unknown provider: spacesListProvider <- spacesList仍然存在spaceLists和控制器中的所有其他解析。

这是路由器中代码的相关部分（新代码）：

.when('/experiences',{
    templateUrl: 'partials/experiences-list.html',
    controller: 'saas.experienceController',
    controllerAs: 'products',
    resolve: {
        experiencesList: getAllExperiences
    }
})
.when('/experiences/:id',{
    templateUrl: 'partials/single-experience.html',
    controller: 'saas.experienceController',
    controllerAs: 'product',
    resolve: {
        experienceDetail: getExperienceDetail,
        spacesList: getSpaces,
        cancellationsLists: getCancellations
    }
})
.when('/new-experience',{
    templateUrl: 'partials/new-experience.html',
    controller: 'saas.experienceController',
    controllerAs: 'product',
    resolve: {
       experienceDetail: getExperienceDetail,
       spacesList: getSpaces
    }
})
.when('/edit-experience/:id',{
    templateUrl: 'partials/edit-experience.html',
    controller: 'saas.experienceController',
    controllerAs: 'product',
    resolve: {
       experienceDetail: getExperienceDetail,
       spacesList: getSpaces
    }
})
.otherwise({
    templateUrl: '404.html'
});

// Functions
// Experiences

getExperienceDetail.$inject = ['apiService', '$route'];
function getExperienceDetail(apiService, $route) {
    if(!$route.current.params.id){
      return false;
    }
    return apiService.getOneProd($route.current.params.id);
}; // getExperienceDetail

getAllExperiences.$inject = ['apiService'];
function getAllExperiences(apiService) {
    return apiService.getAllProds();
}; // getAllExperiences

getCancellations.$inject = ['apiService', '$route'];
function getCancellations(apiService, $route) {
    if(!$route.current.params.id){
      return false;
    }
    return apiService.getProdCancellations($route.current.params.id);
}; // getCancellations

// Spaces
getSpaces.$inject = ['apiService', '$route'];
function getSpaces(apiService, $route) {
    if(!$route.current.params.id){
      return false;
    }
    return apiService.getProdSlots($route.current.params.id);
}

注意：apiService是另一个模块中定义的完整服务
注意：所有解析功能都在路由器下方定义，通过提升注入和调用

我像往常一样将结果，服务和所有内容注入控制器：

expCtrl.$inject = ['$routeParams', '$location', 'apiService', 'experiencesList', 'experienceDetail', 'spacesList', 'cancellationsLists'];

function expCtrl($routeParams, $location, apiService, experiencesList, experienceDetail, spacesList, cancellationsLists)...

我花了很多时间寻找答案或提示，但现在我被困了。有什么想法吗？

谢谢！

Answer 1

解析器是本地依赖项，仅可在路由控制器和其他路由器解析器中进行注入。

应将

spacesList注入路由控制器，并通过范围传播到experienceForm视图元素。

如果experienceForm具有隔离范围，则可以通过绑定属性传递解析器，否则可以从路由控制器的继承范围中获取。

Answer 2

您的问题的一个可能的来源可能是，您使用了spaceList而没有将它的模块作为依赖于您声明experienceForm控制器的模块。

// Somewhere in a module 'bla' spacesList is declared (as a service??)
angular.module('bla')
    .service('spacesList', spacesList);
spacesList.$inject = [...];
function spacesList(...) { ... };


// include 'bla' module in 'module1' to be able to inject spacesList
angular.module('module1', ['bla'])
    .controller('experienceForm', experienceForm);

experienceForm.$inject = ['$routeParams', '$location', 'apiService', 'spacesList', 'experienceDetail'];
function experienceForm($routeParams, $location, apiService, spacesList, experienceDetail)...

根据新的更新/评论进行更新

好的，那么我认为问题可能是在spacesList被弄清楚而且错误有点误导时造成的，即当angular定义了spaceList时，它会转到getSpaces并出现错误发生，所以spacesList没有定义，抛出的错误只是关于spaceList根本没有定义，但没有告诉我们问题的确切位置。所以我的理论是，getSpaces是有问题的那个。

尝试这样的事情怎么样：

你提到过，getSpaces使用＆＃39; apiService＆＃39;解析器是在下面声明的一些函数...你是否尝试将解析器声明为内联函数并向它们注入一个服务，然后注入apiService？

假设模块在变量module1上可用。

并确保检查来自apiService的模块是否包含在声明路由的模块的依赖项中（例如，包含上面示例中的＆＃39; bla＆＃39;的部分）＆＃39;模块1＆＃39;）...

module1.service('getSpacesSvc', getSpacesSvc);

getSpacesSvc.$inject = ['apiService', ...];
function getSpacesSvc(apiService, ...) {
    this.getStuff = function() {
        return apiService.getSomething();
    }
}

// And then on your routes
resolve: {
    spacesList: function(getSpacesSvc) {
        return getSpacesSvc.getStuff();
    }
}

如果这不起作用或您已经尝试过，请先尝试使用极其基本的功能（如上面的示例所示的服务），没有其他依赖关系，例如返回一些硬编码的灯具。如果可行的话，那么你至少要有一个起点来构建。

更新＃2

我也发现了一些类似的问题，这可能是导致问题的原因。您是否在路线上使用的任何模板上使用ng-controller指令进行更改？

E.g。检查模板上是否使用了ng-controller="saas.experienceController"。

有关详细信息，请查看此问题：https://stackoverflow.com/a/18305438/466275

Angular route解决了[$ injector：unpr]组件错误

重要编辑：

2 个答案: