angular-ui-router nested named views with typescript

Hi I'm new to typescript with little experience with angular. I've been trying to get a pretty common angular-ui-router setup working with typescript but I just can't figure out what I'm missing. I have a two nested named views which doesn't seem to load at all.

app/app.ts

module myModule{
class MyConfig {
    constructor( private $stateProvider:ng.ui.IStateProvider,
                 private $urlRouterProvider:angular.ui.IUrlRouterProvider ) {
        this.init();
    }

    private init():void {
        this.$stateProvider.state( 'home',
            {
                abstract:true,
                template: '<main></main>',
                url: '/'
            }).state('home.main',
            {
                views: {
                    'lhp@home': { template: '<lhp></lhp>' },
                    'rhs@home': { template: '<rhs></rhs>' }
                },
                url: '/main',
            });

        this.$urlRouterProvider.otherwise('/main');
    }
}

let myApp = angular.module( 'myModule', ['ui.router'] );
myApp.config(['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) => {
    return new MyConfig($stateProvider, $urlRouterProvider);
}]);

}

The main directive is a simple div which is the container for two named views

main.html/main.controller.ts

module app.Controllers {
    export class MainController {
        constructor( private $log:ng.ILogService ) {
            this.Init();
        }

        private Init() {
            this.$log.info('Main Controller');
        }

    }

    angular.module('myModule').controller( 'mainController', ['$log', MainController] );
}

app/components/main.html

<div>
    <div id="wrap">
        <div id="left_col" ui-view="lhp"></div>
        <div id="right_col" ui-view="rhs"></div>
    </div>
</div>

app/components/main.directive.ts

module app.Directives {
    'use strict';
    export class MainDirective implements ng.IDirective {
        public templateUrl:string = 'components/main.html';
        public restrict:string = 'E';
        public controller:string = 'mainController';
        public scope = {};

        constructor(private $log:ng.ILogService) {
            this.$log.info('main directive');
        }

        public static Factory() {
            return (log:ng.ILogService) => {
                return new MainDirective(log);
            };
        }
    }

    angular.module('myModule').directive('main', ['$log', app.Directives.MainDirective.Factory()]);
}

app/components/lhp.controller.ts

module app.Controllers {
    export class LhpController {
        constructor( private $log:ng.ILogService ) {
            this.Init();
        }

        private Init() {
            this.$log.info('LHP Controller');
        }
    }

    angular.module('myModule').controller( 'lhpController', ['$log', LhpController] );
}

app/components/lhp.html

<div style="width: inherit">
    THIS IS A TEST
</div>

app/components/lhp.directive.ts

module app.Directives {
    'use strict';
    export class LhpDirective implements  ng.IDirective {
        public templateUrl:string = 'components/lhp.html';
        public restrict:string = 'E';
        public controller:string = 'lhpController';
        public controllerAs:string = 'lctrl';
        public scope = {};

        constructor(private $log:ng.ILogService) {
            this.$log.info('lhp directive');
        }

        public static Factory() {
            return (log:ng.ILogService) => {
                return new LhpDirective(log);
            };
        }
    }

    angular.module('myModule').directive('lhp', ['$log', app.Directives.LhpDirective.Factory()]);
}

The view rhs is setup exactly like the lhp. I've confirmed both rhs, and lhp directives are properly working by making the home state non-abstract and loading them as the template. Both rendered properly. When I make the home state abstract is when I run into problems. The main controller let alone html does not load at all. Is there some issue with typescript and abstract views? Has anyone run into similar issues with typescript and nested named views? I scoured the internet for similar examples but couldn't find anything relevant. The closest example I've found was: How can I add ui-router stateProvider configuration to my application with Typescript? which shows an abstract view should be possible with typescript but the example didn't fill in the details. Am I missing something for nested named views to work with typescript?

Any help would be greatly appreciated.