title: angular2: strange null error from an injected service
body: <p>I have a very basic web app which has a <code>Home component</code> that uses a <code>localStorage</code> service to check if a local ip has been set.  If the local ip hasn't been set it must navigate to the settings page where a local IP can be entered.  When I run my app (using ng-cli) I get the following error.  It seems like even though I injected <code>localStorageService</code> in the <code>constructor</code> it's <code>null</code> for some reason...  Any idea what might be going wrong?</p>
  
  <p>my <code>error</code>:</p>
  
  <pre><code>main.bundle.js:42342
  EXCEPTION: Uncaught (in promise): Error: Error in ./HomeComponent class HomeComponent_Host - inline template:0:0 caused by: Cannot read property 'localIP'
  of null
  TypeError: Cannot read property 'localIP' of null
      at LocalStorageService.getLocalIP (
  http://localhost:4200/main.bundle.js:64378:18)
      at HomeComponent.ngOnInit (
  http://localhost:4200/main.bundle.js:64008:46)
      at Wrapper_HomeComponent.detectChangesInInputProps (/AppModule/HomeComponent/wrapper.ngfactory.js:18:53)
      at _View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:30:27)
      at _View_HomeComponent_Host0.AppView.detectChanges (
  http://localhost:4200/main.bundle.js:59869:14)
      at _View_HomeComponent_Host0.DebugAppView.detectChanges (
  http://localhost:4200/main.bundle.js:59974:44)
      at ViewRef_.detectChanges (
  http://localhost:4200/main.bundle.js:43438:20)
      at RouterOutlet.activate (
  http://localhost:4200/main.bundle.js:46946:42)
      at ActivateRoutes.placeComponentIntoOutlet (
  http://localhost:4200/main.bundle.js:15157:16)
      at ActivateRoutes.activateRoutes (
  http://localhost:4200/main.bundle.js:15135:22)
  </code></pre>
  
  <p>my <code>HomeComponent</code>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { RestService } from '../../services/rest.service';
  import { LocalStorageService } from '../../services/local-storage.service';
  
  @Component({
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
    constructor(private restService: RestService, private localStorageService: LocalStorageService, private router: Router) {
  this.localStorageService = new LocalStorageService();     
  }
  
    ngOnInit() {    
        let ip = this.localStorageService.getLocalIP();
        if (!ip.length &gt; 0) {
            this.router.navigate(['settings']);
        }
        console.log(this.localStorageService.getLocalIP());  
  
  
    }
  
  }
  </code></pre>
  
  <p>my <code>LocalStorageService</code>:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class LocalStorageService {
  
  saveLocalIP(ip: string): void {
      let localData = localStorage.getItem('retail_mobile');
      if (localData) {
          localData = JSON.parse(localData);
      } else {
          localData = "";
      }
  
      localData = "{localIP:" + ip + "}";
      localStorage.setItem('retail_mobile', JSON.stringify(localData));   
  }
  
  getLocalIP() {
      let data = JSON.parse(localStorage.getItem('retail_mobile'));
      if (!data.localIP) {        
          console.log("No local IP found in local storage...");
          return '';
      }
  
      return data.localIP;
  }
  
    constructor() { }
  
  }
  </code></pre>