Angular 1.5 - UI-Router, Resolve Object returning undefined values

Question

I am unable to get resolved data (via resolve object) from ui router pre-loaded into a component controller. the properties are showing up in the component's this object, but all properties are undefined. Why is this happening? I have been stuck on this for a while now...

here is the component:

  .component('wLoans', {
    template: require('./loans.html'),
    controller: LoansController,
    bindings: {
      settings: '<',
      labels: '<'
    }
  });

this.settings and this.labels appear, but they are undefined. when I console.log inside resolve.settings below, I can see the promise itself. in the promise below, value contains the return data I want:

below is the state I am working on with UI router:

{
      name: 'loans',
      parent: 'app',
      url: '/loans',
      data: {
        authRequired: true
      },
      views: {
        content: {
          template: '<w-loans></w-loans>'
        }
      },
      resolve: {
        labels(LabelService) {
          'ngInject';
          return LabelService.fetch();
        },
        settings(SettingsService) {
          'ngInject';
          console.log(SettingsService.fetch());
          return SettingsService.fetch()
        },
        module($q, $ocLazyLoad, LabelService) {
          'ngInject';
          return $q((resolve) => {
            require.ensure([], (require) => {
              let mod = require('pages/loans');
              $ocLazyLoad.load({ name: mod.name });
              resolve(mod.name, LabelService.fetch());
            }, 'loans');
          });
        }
      }
    }

here is the fetch function from the service that's being called in the route:

function fetch() {
        // return $http.get(require('!!file!mocks/settings.json'), {
    return $http.get(`${DEV_API_URL}/settings`, {
      cache: settingsCache,
      transformResponse: [
        ...$http.defaults.transformResponse,
        transformResponse
      ]
    })
      .then(({ data }) => {
        angular.extend(model, data);
        settingsCache.put('store', model);
        return model;
      });
  }

Any help is appreciated!

UPDATE: using ui router 1.0.0-beta.1

Andreas Jägle · Accepted Answer · 2016-08-10 21:56:43Z

1

As long as you are not using the 1.0.0 (currently beta) version of the ui-router there is no way to directly use the components. For the beta version, please see this discussion: https://github.com/angular-ui/ui-router/issues/2627. There is also a tutorial on how to use routing to components with resolves: https://ui-router.github.io/tutorial/ng1/hellogalaxy

What you are doing here is creating a state named loans with an implicit controller and scope which will have the resolved data assigned. In the template you then instantiate your component without passing any of the attributes required.

So if you want to use your component with the 0.2.x ui-router, you need to add some dummy controller which gets the resolved properties injected and then pass the values of the dummy controller into the component via the template like

<w-loans settings="settings" .../>

Depending on how new your version of the ui-router is (0.3.x?), you can probably use the newly introduced $resolve property to avoid creating a dummy controller like this:

<w-loans settings="$resolve.settings" ...></w-loans>

Details here: https://github.com/angular-ui/ui-router/issues/2793#issuecomment-223764105

edited Aug 10, 2016 at 21:56

answered Aug 10, 2016 at 21:08

Andreas Jägle

12.4k3 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

devdropper87 Over a year ago

I'm using the beta version. let me update my question with that info

Andreas Jägle Over a year ago

Great. Then it's pretty straightforward to use your components directly. There is even a tutorial covering the resolve handling with components in the beta docs page: ui-router.github.io/tutorial/ng1/hellogalaxy

devdropper87 Over a year ago

hey Andreas, any thoughts on this question of mine also related to UI router? stackoverflow.com/questions/39277446/…

joerno · Accepted Answer · 2017-03-30 08:12:20Z

0

I had a similar problem with Angular 1.6 and it looks like a different behavior of this version. My view is rendered after the promise is resolved, but the controller is called before, I think. It works for me using $onInit like the angular docs suggests:

.component('myComponent', {
  bindings: {value: '<'},
  controller: function() {
    this.$onInit = function() {
      // do somthing with this.value
    };
  }
})

https://github.com/angular/angular.js/issues/15545

answered Mar 30, 2017 at 8:12

joerno

1,1412 gold badges11 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 1.5 - UI-Router, Resolve Object returning undefined values

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related