title: Defining localstorage for angular2 app
body: <p>I am using localStorage in an authentication service in one app. Now I am migrating the old app to a new project structure with webpack. Of course, I have different <code>package.json</code> files, but I do not know which specific node module I need. </p>
  
  <p>This is the error:</p>
  
  <pre><code>Exception: Call to Node module failed with error: Error: Uncaught (in promise): ReferenceError: localStorage is not defined
  </code></pre>
  
  <p>The component for login is entirely copied to the new project, and it has not any compilation errors, I added the component and authentication service to my <code>app.module</code> but I get that error.</p>
  
  <p>How do I set up <code>package.json</code> and <code>app.module.ts</code> files for defining <code>localStorage</code>?</p>
  
  <p>These are the files:</p>
  
  <p><code>app.module.ts</code></p>
  
  <pre><code>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 {
  }
  </code></pre>
  
  <p><code>package.json</code></p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p>This is the code where the error is produced:</p>
  
  <pre><code>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 &amp;&amp; currentUser.token;
      }
  
  login(username, password): Observable&lt;boolean&gt; {
      //...
  }
  
  logout(): void {
      // clear token remove user from local storage to log user out
      this.token = null;
      localStorage.removeItem('currentUser');
  }
  </code></pre>
  
  <p>}</p>