TypeScriptモジュールが見つかりません。

Question

typescript、angular2、およびaspコアを使用して簡単なジョブを試しているので、約10時間かかりました。私がここに到達した経路と、あなたが私が感謝する考えがある場所について説明します。

まず、あなたは、私がリンク怒鳴るからプロジェクトテンプレートを使用していますことを考慮する必要があります。

Template

その後、私はいくつかのlocalStorageでデータを格納するためのいくつかのコードを追加したいです。

リンクによっては、非常に単純なlocalStorageへのアクセスが必要であることが示唆されています。私はangular2のコンポーネント内からのlocalStorageにアクセスしたいときしかし、私はこのエラーを得た：

localStorage is not defined

その後、私は解決策のために多くのことをGoogleで検索し、以下のライブラリが見つかりました：

angular2-localstorage

をangular-2-local-storage

angular2-local-storage

しかし、それらのすべては動作しません。

次に、私はサービスを書くことを試みましたが、簡単にlocalStorageにアクセスすることができます。それから私は、このファイルを作成しました：

/ClientApp/app/services/local-storage-service.tsを

export class LocalStorageService { 
    write(key: string, value: any) { 
     if (value) { 
      value = JSON.stringify(value); 
     } 
     localStorage.setItem(key, value); 
    } 

    read<T>(key: string): T { 
     let value: string = localStorage.getItem(key); 

     if (value && value != "undefined" && value != "null") { 
      return <T>JSON.parse(value); 
     } 

     return null; 
    } 
} 

が、私はこのようにそれをインポートしようとすると：私が得た

import { LocalStorageService } from 'services/local-storage-service'; 

をこのエラー：

cannot find module 'services/local-storage-service' 

私はあなたが推測できるすべてを試しました。奇妙な部分が輸入怒鳴るが正常に動作していることである：

import { AppComponent } from './components/app/app.component'; 

私は/services/app.component」にそのファイルをコピーするとき、ファイルが「/ClientApp/app/app.component.ts」であるが、こと。同じエラーが発生します。

私はこの問題について質問する方法については十分に考えていません。しかし、私はあなたのアイデアを試してみます。

****のUPDATE これは、ディレクトリツリーである：

ファイルapp.modules.tsに私はこのようにアクセスすることができますが：エラーなし

import { LocalStorageService } from './services/local-storage.service'; 

。 settoken.component.tsファイルではエラーが発生します。

***私はサービスが注入されている正しいパスとREUPDATE今

。しかし、localStorageは定義されていません！ サービスコードが提案されています。

import { Injectable } from '@angular/core'; 

@Injectable() 
export class LocalStorageService { 
    private storage: any; 

    constructor() { 
     this.storage = localStorage; 
    } 

    public retrieve(key: string): any { 
     var item = this.storage.getItem(key); 

     if (item !== null && item !== 'undefined') { 
      return JSON.parse(this.storage.getItem(key)); 
     } 

     return; 
    } 

    public store(key: string, value: any) { 
     this.storage.setItem(key, JSON.stringify(value)); 
    } 

} 

とエラー：

Exception: Call to Node module failed with error: Error: Uncaught (in promise): ReferenceError: localStorage is not defined 
ReferenceError: localStorage is not defined 

TG。

Answer 1

モジュール以外のファイルの場合は、相対パスを使用する必要があります。例えば、./,../。あなたは、そのファイルがそのサービスに関連してそのサービスをインポートしようとしている場所がどこであるかは言いません。それが親ディレクトリにあると仮定すると、パスは./services/local-storage-serviceになります。

問題が解決しない場合は、このローカルストレージサービスをお試しください。

import { Injectable } from '@angular/core'; 

@Injectable() 
export class LocalStoragePersistence { 
    private storage:any; 

    constructor() { 
     this.storage = localStorage; 
    } 

    public retrieve(key:string):any { 
     var item = this.storage.getItem(key); 

     if (item !== null && item !== 'undefined') { 
      return JSON.parse(this.storage.getItem(key)); 
     } 

     return; 
    } 

    public store(key:string, value:any) { 
     this.storage.setItem(key, JSON.stringify(value)); 
    } 

} 

import { LocalStoragePersistence } from './services/local-storage.service'; 

であなたのコンポーネントにインポートし、それはあなたがあなたのプロバイダの配列にそれを宣言することを忘れないでくださいことを確認してください：providers: [ LocalStoragePersistence ]

注意をlocal-storage.service.tsにファイルの名前を変更するためにそこに提案。これは、ファイル（feature.type.ts）のAngular 2命名パターンです。お役に立てれば。