I'm trying to build an es2015, offline, bundled (using webpack) version of the ui-router angular1 tutorial, but I'm getting caught up in trying to resolve some data passed to a component. Although the service function returns a resolved promise with the actual data, it never gets injected into the component. When I try to make a controller to examine it being passed in, if I pass in the name of the property being resolve, I get the error

Error: [$injector:unpr] Unknown provider: peopleProvider <- people

Here's some source. If you need to see more I can add you to the repo

app.js

import angular from 'angular';
import 'angular-animate';
import 'angular-aria';
import 'angular-ui-router';
import 'material-design-lite';

import 'material-design-lite/dist/material.css';
import './scss/main.scss';

import Layout from './components/layout/layout.component';
import PeopleService from './services/people.service';
import states from './config/app.states';

angular.module('app', [
  'ui.router',
  Layout.name
])
.config(states)
.service('peopleService', PeopleService);

Simplified app.states.js

export default function($locationProvider, $stateProvider, $urlRouterProvider) {  
  $stateProvider
  // other states
  .state('lists', {
    url: '/lists',
    template: '<lists></lists>',
    resolve: {
      people: ['peopleService', PeopleService => {
        console.log(PeopleService.getAllPeople();
        return PeopleService.getAllPeople();
      }]
    }
  });

  $urlRouterProvider.otherwise('/');
}

layout.component.js

import Lists from '../lists/lists.component';

export default angular.module('layout', [
  Lists.name
])
.component('layout', {
  templateUrl: './components/layout/layout.template.html'
});

list.component.js

export default angular.module('app.lists', [])
.component('lists', {
  templateUrl: './components/lists/lists.template.html',
  bindings: {
    people: '<' // from 'resolve' property of config/app.states
  },
  controller: class ListCtrl {
    constructor(people) {
      console.log(arguments);
      console.log(this);
    }
  }
});

PeopleService.getAllPeople() returns properly. The people property appears on the component, but it's always undefined, unless I use the above code where I try to pass people as an argument, in which case it throws the $injector:unpr error.

Thanks for any help

share|improve this question

Sorry, my previous answer was incorrect. I think to get closer to solution you need at least add people attribute to your template in app.states.js. Like this <lists people="people"></lists>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.