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