UI-Router and solution, an unknown vendor in the controller

Question

I use the solution in my call to UI-Router.state (). In my controller, I can access the values ​​without problems, but it throws an error as follows:

$ injector / unpr? P0 = ctrlOptionsProvider% 20% 3C-trlOptions

The following code throws an error, but allows me to easily access the ctrlOptions variable:

 .state('new_user', { url: "/user/new", templateUrl: "views/user/new.html", data: {pageTitle: 'New User'}, controller: "UserController", resolve: { ctrlOptions: ['$stateParams', function($stateParams) { return { view: 'new_user', } }], deps: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load({ name: 'MetronicApp', insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before' files: [ '../../../assets/global/plugins/bootstrap-datepicker/css/datepicker3.css', '../../../assets/global/plugins/select2/select2.css', '../../../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js', '../../../assets/global/plugins/select2/select2.min.js', ] }); }] } }) 

---

 MetronicApp.controller('UserController', ['$rootScope', '$scope', '$http', '$stateParams', 'ctrlOptions', function($rootScope, $scope, $http, $stateParams, ctrlOptions, $timeout) {} 

Any idea how to fix this?

thanks

Answer 1

Remove ng-controller="UserController" from your view, let the router instantiate the controller.

When you use the route resolution argument as an infusion of dependencies in the controller associated with the route, you cannot use this controller with an ng controller or any other directive, because a service provider named ctrlOptions does not exist. This is a dynamic dependency that is introduced by the router when it creates a connection with the controller in the corresponding partial representation. It is also better not to create an instance of the controller with the ng-controller and run the template with the ng-controller directive, when the router can create an instance and associate the controller with this template, the template will be more reused since it is not closely connected with the name controller (with ng-controller = "ctrlName"), but only with the contract.

Answer 2

So I had the same issue, but my setup is different. Just post it in case anyone comes across this. The first time sending an answer is so not sure if there is a better place for an answer that does not solve the OP answer, but still solves the variant of the question asked.

Application status

I have a parent state of "application" and a child state of "home". When a user logs in, they go through an "application" that allowed, and then redirected to the "home".

 angular .module('common') .component('app', { templateUrl: './app.html', controller: 'AppController', bindings: { member: '=', organization: '=', } }) .config(function ($stateProvider) { $stateProvider .state('app', { redirectTo: 'home', url: '/app', data: { requiredAuth: true }, resolve: { member: ['AuthService', function (AuthService) { return AuthService.identifyMember() .then(function (res) { AuthService.setAuthentication(true); return res.data; }) .catch(function () { return null; }); } ], organization: ['AuthService', function (AuthService) { return AuthService.identifyOrganization() .then(function (res) { return res.data; }) .catch(function () { return null; }); } ], authenticated: function ($state, member) { if (!member) $state.go('auth.login'); } }, component: 'app', }); }); 

The solution for me was in bindings . I did this for the participant before, but forgot to do it for the organization, so that was my stupid problem.

Condition of the house

 angular .module('components') .component('home', { templateUrl: './home.html', controller: 'HomeController', bindings: { member: '=', organization: '=', } }) .config(function ($stateProvider) { $stateProvider .state('home', { parent: 'app', url: '/home', data: { requiredAuth: true }, component: 'home', resolve: { 'title' : ['$rootScope', function ($rootScope) { $rootScope.title = "Home"; } ], } }); }); 

Again the solution was in bindings .

NOTE. I do not need to enter data into the controller.

 function HomeController(AuthService, $state) { let ctrl = this; } 

I don’t know why I do not need to enter directly into the controller so that it is available as ctrl.member and ctrl.organization .

Answer 3

I had this problem, and for me the problem was that I assigned the controller usually angular module AND to the ui router. eg.

I have had:

 let app: ng.IModule = angular.module('userManagementApp'); app.controller(PartyViewController.IID, PartyViewController); //NOTICE THIS app.config(['$locationProvider', '$routeProvider', ($locationProvider: ng.ILocationProvider, $routeProvider: any) => { $routeProvider.when("something", { templateUrl: 'views/partyView/partyView.html', controller: PartyViewController.IID, //NOTICE THIS controllerAs: 'pvCtrl', reloadOnSearch: false, resolve: { ... } }) 

But I had to:

 let app: ng.IModule = angular.module('userManagementApp'); app.config(['$locationProvider', '$routeProvider', ($locationProvider: ng.ILocationProvider, $routeProvider: any) => { $routeProvider.when("something", { templateUrl: 'views/partyView/partyView.html', controllerAs: 'pvCtrl', reloadOnSearch: false, resolve: { ... }, controller: PartyViewController }) 

The problem arose because angular tried to load this controller on its own, but it should not - the router should.

Answer 4

Is this possible due to the extra comma?

 return { view: 'new_user', } 

Try using a comma.

Also, you forgot to enter $timeout on your controller after ctrlOptions