AngularJS 1.x TypeScript（帶Webpack）攔截器問題

我剛剛開始使用TypeScript，所以我覺得它非常愚蠢。我已經通過幾十個鏈接的幾個，但無法找到到底是什麼問題，我的服務實例是undefined。所以我的應用程序結構很簡單（？）：在TypeScript和Webpack中使用AngularJS 1.5。我的主應用程序文件是如下：AngularJS 1.x 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"];

所以，在上述方法中請求（reqCfg：a ny）：任何我已經評論了我需要訪問appLocalStorage的局部變量的行，我得到「無法訪問屬性'appLocalStorage'undefined」的錯誤。

**我在我的所有服務構造函數中添加了console.log（稍後會刪除）。當我頁面加載我的應用程序加載罰款，直到攔截器被擊中。在請求函數我的服務實例是undefined。請參見下面的日誌：

我突出了「不確定」的 console.debug的結果（JSON.stringify（本））;

我不知道爲什麼我這在服務不確定。

另一個不是一個大問題，我想，只是練習，如果你看到在主應用程序文件的末尾那些虛擬線。爲什麼我需要告訴webpack基本的東西？

有人可以幫忙嗎？

如下主要問題我的回答是解決
但是把虛擬線的小問題，這樣的WebPack捆綁我的文件仍然停留。

來源

2016-10-27 NikhilP

做更多的挖掘後，我找到了答案在這裏：（問題是礦山基本相同） 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; 
 
}

如上所示正常工作。

來源

2016-10-27 13:18:23 NikhilP

AngularJS 1.x TypeScript（帶Webpack）攔截器問題

回答

相關問題