angular2appのlocalstorageを定義する

Question

1つのアプリケーションで認証サービスでlocalStorageを使用しています。今は古いアプリをwebpackで新しいプロジェクト構造に移行しています。もちろん、別のpackage.jsonファイルがありますが、必要な特定のノードモジュールがわかりません。

これはエラーです：

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

ログインするためのコンポーネントが完全に新しいプロジェクトにコピーされ、それがコンパイル・エラーがない持っている、私は私のapp.moduleにコンポーネントおよび認証サービスを追加しましたが、私はそれを取得しますエラー。

package.jsonとapp.module.tsのファイルをlocalStorageと定義するにはどうすればよいですか？

これらはファイルです：

app.module.ts

import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
// import { DataTableModule, SharedModule} from 'primeng/primeng'; 

import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { LoginComponent } from './components/login/login.component'; 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
import { CounterComponent } from './components/counter/counter.component'; 

import { AuthenticationService } from './components/login/authentication.service'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     HomeComponent, 
     LoginComponent 
    ], 
    providers: [ 
     AuthenticationService 
    ], 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     FormsModule, 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'login', component: LoginComponent }, 
      { path: 'counter', component: CounterComponent }, 
      { path: 'fetch-data', component: FetchDataComponent }, 
      { path: '**', redirectTo: 'home' }, 
     ]) 
    ] 
}) 
export class AppModule { 
} 

package.json

{ 
    "name": "Angular2Spa", 
    "version": "0.0.0", 
    "dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/platform-server": "2.0.0", 
    "@angular/router": "3.0.0", 
    "@types/node": "^6.0.38", 
    "angular2-platform-node": "~2.0.10", 
    "angular2-universal": "~2.0.10", 
    "angular2-universal-polyfills": "~2.0.10", 
    "aspnet-prerendering": "^1.0.6", 
    "aspnet-webpack": "^1.0.11", 
    "bootstrap": "^3.3.7", 
    "css": "^2.2.1", 
    "css-loader": "^0.25.0", 
    "es6-shim": "^0.35.1", 
    "expose-loader": "^0.7.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.9.0", 
    "isomorphic-fetch": "^2.2.1", 
    "jquery": "^2.2.1", 
    "preboot": "^4.5.2", 
    "raw-loader": "^0.5.1", 
    "rxjs": "5.0.0-beta.12", 
    "style-loader": "^0.13.0", 
    "to-string-loader": "^1.1.5", 
    "ts-loader": "^0.8.2", 
    "typescript": "^2.0.0", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.12.14", 
    "webpack-externals-plugin": "^1.0.0", 
    "webpack-hot-middleware": "^2.10.0", 
    "webpack-merge": "^0.14.1", 
    "zone.js": "^0.6.21" 
    } 
} 

これは、エラーが生成されたコードです：

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs'; 
import 'rxjs/add/operator/map' 

@Injectable() 
export class AuthenticationService { 
    public token: string; 
    public codusuario: string; 
    constructor(private http: Http) { 
     // set token if saved in local storage 
     var currentUser = JSON.parse(localStorage.getItem('currentUser')); 
     this.token = currentUser && currentUser.token; 
    } 

login(username, password): Observable<boolean> { 
    //... 
} 

logout(): void { 
    // clear token remove user from local storage to log user out 
    this.token = null; 
    localStorage.removeItem('currentUser'); 
} 

}

Answer 1

のlocalStorageは、グローバルJSレベルで定義する必要がありますが、コンパイラは、それが定義されていないと言うように、あなたはそれのための活字体の定義を持っていません。

だけで、ファイルの先頭

declare var localStorage : any;

に配置し、活字体コードでのlocalStorageを使用するようにしてください。

また、angular2-localstorageモジュールを使用することもできます。