0

私はTypeScriptを使い始めたばかりなので、とても馬鹿だと思います。 私は数十のリンクをいくつか見てきましたが、サービスインスタンスがであることが正確にわからないのですが、です。 私のアプリの構造は簡単です(?): AngularJS 1.5をTypeScriptとWebpackで使用する。 私のメインのアプリのファイルは以下の通りです: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私はappLocalStorageのローカル変数にアクセスする必要がある行をコメントしました。 "appLocalStorage 'のプロパティ' appLocalStorage 'にアクセスできません。"というエラーが表示されます。

**すべてのサービスコンストラクタにconsole.logを追加しました(後で削除されます)。 私がページをロードするときに、インターセプタがヒットするまで、アプリケーションの読み込みが正常に行われます。要求で機能私のサービスのインスタンスは定義されていませんです。以下のログを参照してください:

Console Log

私は console.debug(JSON.stringify(本))の結果として、 "未定義" を強調してきました。

サービスの私この未定義、なぜ私は思ったんだけど。

もう一つの大きな問題ではない、私はあなたがメインのアプリケーションファイルの最後のもの ダミーラインを見れば、ただ、練習だと思います。なぜwebpackに何か基本的なことを伝える必要があるのですか?

誰かが助けてもらえますか?主な問題は、以下の私の答えとして


を解決しかしWebPACKのが私のファイルをバンドルするようにダミーのラインを入れてのマイナーな問題が静止しています。

答えて

0

より多くの掘削を行った後、私はここで答えを見つけました:(質問は私とほぼ同じであった) 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; 
 
}

上記のように正常に動作します。

関連する問題