Angularjs 带typescript的角度ui路由器嵌套命名视图

嗨，我是打字新手，对angular几乎没有经验。我一直在尝试使用typescript建立一个非常常见的angular ui路由器，但我就是不知道我缺少了什么。我有两个嵌套的命名视图，看起来根本没有加载

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);
}]);

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] );
}

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()]);
}

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] );
}

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()]);
}

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>

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

app/components/lhp.controller.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);
}]);

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] );
}

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()]);
}

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] );
}

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()]);
}

app/components/lhp.html

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

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

视图rhs的设置与lhp完全相同。我已经确认了rhs和lhp指令都可以正常工作，方法是将主状态设置为非抽象状态并将它们作为模板加载。两者都渲染得很好。当我把家乡抽象化的时候，就是我遇到问题的时候。主控制器（更不用说html）根本不加载。typescript和抽象视图是否存在一些问题？是否有人在typescript和嵌套命名视图方面遇到过类似的问题？我在网上搜寻类似的例子，但找不到任何相关的。我发现的最接近的例子是：它显示了一个抽象视图应该可以使用typescript，但是这个例子没有填充细节。我是否缺少嵌套命名视图使用typescript的功能

---

任何帮助都将不胜感激

我的同事解决了这个问题。这是一个超级简单的修复。问题是由于在我的抽象视图中有一个url字段引起的：

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

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

private init（）：void{
此.$stateProvider.state（'home'，
{
摘要：没错，
模板：“”
}).state（'home.main'，
{
观点：{
'lhp@home“：{模板：'}，
'rhs@home“：{模板：'}
},
url:“/main”，
});
此.urlRouterProvider。否则（'/main'）；
}