Use resolve with angularjs component

Question

I am trying to resolve a list of customers prior to rendering a page.

Here is the state provider reference, where I have the resolve methods.

angular.module('app')
  .config(($stateProvider) => {
    $stateProvider
      .state('customers', {
        url: '/customers',
        template: '<customers></customers>',
        resolve: {
          test: function () {
            return 'nihao';
          },
        },
      });
  });

Followed by the component, which should have called the #test from resolve. All it should do, is print the word 'nihao' to the console.

(function myCustomersConfig() {
  class MyCustomersComponent {
    constructor(test) {
      this.test = test;
      console.log(this.test);
    }

  angular.module('app').component('myCustomers', {
    templateUrl: 'app/customers/customers.html',
    controller: MyCustomersComponent,
  });
}());

However, I keep getting this error:

angular.js:13708 Error: [$injector:unpr] Unknown provider: testProvider <- test
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=testProvider%20%3C-%20test
    at angular.js:68
    at angular.js:4502
    at Object.getService [as get] (angular.js:4655)
    at angular.js:4507
    at getService (angular.js:4655)
    at injectionArgs (angular.js:4679)
    at Object.invoke (angular.js:4701)
    at $controllerInit (angular.js:10234)
    at nodeLinkFn (angular.js:9147)
    at angular.js:9553

I can see that it's running the resolve functions, so that works, but it won't inject the methods! Any ideas?

Win · Accepted Answer · 2016-07-21T20:19:27.177

8

Your code is missing attribute and binding in order for resolve to work.

angular.module('app')
     ...
       template: '<customers test="$resolve.test"></customers>',           
       resolve: { test: function () { return {value: 'nihao'}; } },
     ...   
  });

(function myCustomersConfig() {

   function MyCustomersComponent {
      // You can use test right away, and also view as $ctrl.test
      console.log(this.test);
   }

  angular.module('app')
    .component('myCustomers', {
       templateUrl: 'app/customers/customers.html',
       controller: MyCustomersComponent,
       bindings: {
          test: "<",
       }       
  });
}());

edited Jul 21 '16 at 20:19

answered Jul 21 '16 at 17:39

Win

61,100
13
102
181

It is similar to the one I asked last month - [How to wait for promise from UI Router Resolve in Angular 1.5 Component](http://stackoverflow.com/questions/38079407/how-to-wait-for-promise-from-ui-router-resolve-in-angular-1-5-component) – Win Jul 21 '16 at 17:44
So I tried it *exactly* like the example you provided, no luck :/ I keep getting the error: "Uncaught TypeError: Cannot read property 'test' of undefined". Could you explain what the bindings is doing, specifically with the "<" sign? – Tori Huang Jul 21 '16 at 20:08
Above code, I forgot ***$resolve.***. Could you please try again? You can read more at [Components as route templates](https://docs.angularjs.org/guide/component#components-as-route-templates) – Win Jul 21 '16 at 20:15
Thank you very much for your help so far! So without injecting 'test', I no longer get the error above. However, I've matched these changes here including $resolve, and now console.log(this.test) returns 'undefined'. Any ideas? – Tori Huang Jul 21 '16 at 21:09
If test is a string `return 'nihao';`. you want to use `bindings: { 'test': '@'}` like [this Angular documentation](https://docs.angularjs.org/guide/component#component-based-application-architecture). – Win Jul 21 '16 at 21:11

score 1 · Answer 2 · answered Jul 21 '16 at 17:40

Add bindings to your component and remove it from your controller function

angular.module('app').component('myCustomers', {
    templateUrl: 'app/customers/customers.html',
    controller: MyCustomersComponent,
    bindings: {
        'test': '<' // or @ for string
    }
});

class MyCustomersComponent {
    constructor() {
      // this.test should already exist
      console.log(this.test);
    }
    ....

Use resolve with angularjs component

2 Answers2