0

我刚刚开始使用 TypeScript，所以我认为这很愚蠢。我已经浏览了几十个链接，但无法准确找到我的服务实例未定义的问题。所以我的应用程序结构很简单（？）：使用带有 TypeScript 和 Webpack 的 AngularJS 1.5。我的主要应用程序文件如下：

     // 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 的局部变量的行，我收到错误“无法访问未定义的属性 'appLocalStorage' ”。

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

控制台日志

作为 console.debug(JSON.stringify(this)); 的结果，我突出显示了“未定义”。

我想知道为什么我的this in service 是undefined。

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

有人可以帮忙吗？

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

4

1 回答 1

0

在做了更多的挖掘之后，我在这里找到了答案：（问题和我的几乎一样） TypeScript拦截器在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;
}

如上所示工作正常。

于 2016-10-27T13:18:23.020 回答