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

Question

我刚开始使用 TypeScript，所以我认为它非常愚蠢。我浏览了几十个链接，但无法准确找到我的服务实例是 undefined 的问题所在。所以我的应用程序结构很简单（？）：将 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，我收到 "can't access property 'appLocalStorage' of undefined".

错误

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

我突出显示了 "undefined"，因为 console.debug(JSON.stringify(这个));

我想知道为什么我的 this 在服务中是 undefined.

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

有人可以帮忙吗？

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

Answer 1

经过更多的挖掘，我在这里找到了答案：（问题和我的几乎一样） TypeScript interceptor in AngularJS

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

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

如上所示工作正常。

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

AngularJS 1.x TypeScript (with Webpack) Interceptor issue

angular-http-interceptors

webpack

angularjs-1.5

typescript2.0