AngularJS 1.x TypeScript（带有 Webpack）拦截器问题

Question

我刚开始使用 TypeScript，所以我认为这是非常愚蠢的事情。 我浏览了几十个链接，但找不到我的服务实例未定义的确切问题。 所以我的应用程序结构很简单（？）： 将 AngularJS 1.5 与 TypeScript 和 Webpack 一起使用。 我的主要应用程序文件如下：

     // External 
    import ng = require("angular");

     // App modules
    import authIntSvc = require("./security/authInterceptorSvc");

     // Note: Can't use require as it returns object and we need function
    import localStorageHandler from "./core/localStorageCfg";
    import routingHandler from "./uiRoutes";


    export
    let ptaToolsApp = ng.module('ptaToolsApp', [
      'ngRoute', 'ngStorage',
      'ptaTools.CoreMod'
    ]);

    ptaToolsApp
      .config(routingHandler)
      .config(localStorageHandler);

    console.info("All Done...! " + new Date());

     // Add services
    import secSvc = require("./security/SecuritySvc");
    ptaToolsApp.service(secSvc.SecuritySvc.IID, secSvc.SecuritySvc);

     //import { interceptorInitiator } from "./security/authInterceptorSvc";
    ptaToolsApp.service(authIntSvc.authInterceptorSvc.IID, authIntSvc.authInterceptorSvc);

    ptaToolsApp.config(authIntSvc.interceptorInitiator);

     // Add module controlles - TODO: FInd better way 
    import {
      HomeCtrl
    }
    from "./userHome/homeCtrl";
    ptaToolsApp.controller(HomeCtrl.IID, HomeCtrl);

     // App Init --------- Run function ---------------------------------------
    function runApp(authSvc: secSvc.SecuritySvc) {
      authSvc.checkAuthData();
    }

    runApp.$inject = [secSvc.SecuritySvc.IID];

     // Run App
    ptaToolsApp.run(runApp);

     // App Init --------- Run function ---------------------------------------

     // Dummy requires, just needed for WebPack to pack it in bundle
    import coreMod = require("./core/coreModule");
    const a1 = coreMod;
    import ngRoute = require("angular-route");
    const a2 = ngRoute;
    import ngStorage = require("ngstorage");
    const a3 = ngStorage;

我的拦截器文件如下：

    import ng = require("angular");

    import {
      appLocalStorageSvc
    }
    from "../core/appLocalStorageSvc";
    import * as secModels from "./models";

     //  implements ng.IHttpInterceptor
    export class authInterceptorSvc {

      public static readonly IID = "sec.authInterceptorSvc";

      static $inject = ['$location', '$q', appLocalStorageSvc.IID];

      constructor(private $location: ng.ILocationService, private $q: ng.IQService, private appLocalStorage: appLocalStorageSvc) {
        console.info('constructor:: ' + authInterceptorSvc.IID);
      }

      //public request(reqCfg: ng.IRequestConfig): ng.IRequestConfig {
      public request(reqCfg: any): any {
        reqCfg.headers = reqCfg.headers || {};
        // if ((this.appLocalStorage.authData) && (this.appLocalStorage.authData.isAuth === true))
        //     reqCfg.headers.Authorization = 'Bearer ' + this.appLocalStorage.authData.oAuthToken;

        console.info("in authInterceptorSvc.request");
        console.debug(reqCfg);
        console.debug(JSON.stringify(this));

        return reqCfg;
      }

      // HTTP Rejection
      public responseError(rejection: any) {
        if (rejection.status === 401) {
          this.$location.path('/login');
          return this.$q.reject(rejection);
        }
        return this.$q.reject(rejection);
      }
    }

    export
    function interceptorInitiator($httpProvider: ng.IHttpProvider) {
      $httpProvider.interceptors.push(authInterceptorSvc.IID);
    }

    interceptorInitiator.$inject = ["$httpProvider"];

所以，在上述方法 request(reqCfg: any): any 我已经注释了我需要访问 appLocalStorage 的局部变量的行，我收到错误消息“无法访问 undefined 的属性“appLocalStorage”。

** 我在所有服务构造函数中添加了 console.log（稍后将删除）。 当我页面加载我的应用程序加载正常，直到拦截器被击中。在请求 function 中，我的服务实例是 undefined。请参阅下面的日志：

由于以下原因，我已突出显示“未定义” console.debug(JSON.stringify(this));

我想知道为什么我的 this 在服务中是未定义。

另一个不是什么大问题，我认为，只要练习一下，如果您在主应用文件的末尾看到那些 dummy 行。为什么我需要告诉 webpack 一些基本的东西？

有人可以帮忙吗？

因为我在下面的回答主要问题已经解决了
但是放置虚拟行以便 webpack 捆绑我的文件的小问题仍然存在。

Answer 1

在做了更多的挖掘之后，我在这里找到了答案：（问题和我的差不多） TypeScript interceptor in AngularJS

所以问题在于拦截器的工作方式与控制器或服务的不同。
您需要使其客观化（如上述帖子中的答案所述）。

public request = (config) => {
  // this.TokenService is undefined here as well as $window or $q which I tried to inject
  config.headers = config.headers || {};
  if (this.TokenService.Token != "")
    config.headers.Authorization = 'Bearer ' + this.TokenService.Token;
  return config;
}

如上所示，效果很好。