Abstract state with resolve

[finleysg]

This is mostly a question: is this possible? I have several route configs that look like this:

    $stateProvider
        .state('event-reserve', {
            url: '/event-reserve/{id:int}',
            params: {
                id: 0,
                event: {},
                course: {},
                group: {}
            },
            controller: function ($scope, members) {
                this.members = members;
            },
            controllerAs: 'vm',
            template: '<eventreserve members="vm.members"></eventreserve>',
            resolve: {
                members: ['memberService', function(memberService) {
                    return memberService.getMembers();
                }]
            }
        });

If I were doing old-style 1.X angular, I would create an abstract event route and resolve my common objects there. Then the route above would be a child: event.reserve.

Has anyone used abstract routes with resolves using the NG6-starter? I can't picture how it would work given that there is no template associated with my abstract route.

[finleysg]

So this turns out to work with the same wrapper workaround.

My parent module defines the abstract state:

let eventModule = angular.module('app.events', [
    uiRouter,
    EventDetail.name,
    EventRegister.name,
    EventReserve.name,
    EventPayment.name
])
    .config(($stateProvider) => {
        'ngInject';

        $stateProvider
            .state('event', {
                abstract: true,
                url: '/event/{id:int}',
                params: {
                    id: 0
                },
                template: '<ui-view />',
                resolve: {
                    event: ['$stateParams', 'eventService', function($stateParams, eventService) {
                        return eventService.getEvent($stateParams.id);
                    }]
                }
            });
    });

Then my child gets the resolved data the same way as if the resolve was on it's own route config:

let eventDetailModule = angular.module('eventDetail', [
    uiRouter
])
    .config(($stateProvider) => {
        'ngInject';

        $stateProvider
            .state('event.detail', {
                url: '/detail',
                controller: function ($scope, event) {
                    this.foo = event;
                },
                controllerAs: 'vm',
                template: '<eventdetail foo="vm.foo"></eventdetail>'
            });
    })
    .component('eventdetail', eventDetailComponent);

I have foo defined as a binding on the component, and this.foo is resolved on my controller constructor.