AngularJS，Typescript和Oclazyload无法识别范围

Question

我要将现有的AngularJS应用从（AngularJS + ES5 + Webpack）更改为（AngularJS + Typescript + { {1}}）

这是我的模块实现之一：

login.controller.ts

Webpack

login.scope.ts

import {ILoginScope} from "./login.scope";
import {LoginViewModel} from "../../../view-models/user/login.view-model";

export class LoginController implements ng.IController{

    //#region Properties

    public email: string = '123456';

    //#endregion

    //#region Constructor

    /*
    * Initialize controller with injectors.
    * */
    public constructor(public $scope: ILoginScope){
        this.$scope.loginModel = new LoginViewModel();
        this.$scope.loginModel.email = '123';
        this.$scope.hasEmail = this.hasEmail;
    }

    //#endregion

    //#region Methods

    //#endregion

    //#region Events

    public clickLogin(): void {
        console.log('Hello world');
    }

    public hasEmail(): boolean{
        let loginModel = this.$scope.loginModel;
        if (!loginModel || !loginModel.email)
            return false;

        return true;
    }

    //#endregion
}

login.module.ts

import {LoginViewModel} from "../../../view-models/user/login.view-model";

export interface ILoginScope extends ng.IScope {

    //#region Properties

    /*
    * Login information.
    * */
    loginModel: LoginViewModel;

    //#endregion

    //#region Methods

    /*
    * Called when login is clicked.
    * */
    clickLogin: Function;

    hasEmail: () => boolean;

    //#endregion
}

这是我将import {StateProvider} from "@uirouter/angularjs"; import {UrlStatesConstant} from "../../../constants/url-states.constant"; import {module} from 'angular'; export class LoginModule { //#region Constructors public constructor(private $stateProvider: StateProvider) { $stateProvider .state(UrlStatesConstant.LoginStateName, { url: UrlStatesConstant.LoginStateUrl, controller: 'loginController', templateProvider: ['$q', ($q) => { // We have to inject $q service manually due to some reasons that ng-annotate cannot add $q service in production mode. return $q((resolve) => { // lazy load the view require.ensure([], () => resolve(require('./login.html'))); }); }], parent: UrlStatesConstant.AuthorizeLayoutName, resolve: { /* * Load login controller. * */ loadLoginController: ($q, $ocLazyLoad) => { return $q((resolve) => { require.ensure([], (require) => { // load only controller module let ngModule = module('account.login', []); // Import controller file. const {LoginController} = require("./login.controller"); ngModule.controller('loginController', LoginController); $ocLazyLoad.load({name: ngModule.name}); resolve(ngModule.controller); }) }); } } }); } //#endregion } angularjs模块注册到现有typescript angularjs应用程序中的方式：

es5

当我运行应用程序并访问登录页面时 我的开发人员控制台中引发了一个错误：

TypeError：无法读取ChildScope.LoginController.hasEmail（login.controller.ts：26）上未定义的属性“ loginModel”

这是生成的源地图：

根据错误消息的内容，即使在构造函数中已将其声明为module.exports = (ngModule) => { // Load routes. let login = require('./login'); ngModule.config(($stateProvider) => login.LoginModule($stateProvider)); }; ，也无法识别第26行的this.$scope。

我在做什么错？

谢谢