Angular2 dependency not injecting correct path

Question

I am getting the following errors in my browser console, from trying to use localStorage with Angular2. It seems that the path it is generating isn't referring to the node_modules, but rather assuming that there is a localstorage.js in my site root (which there isn't). I am just referring to it normally (see my user.service below), so how do I get around this? All my other dependencies are working fine.

Error loading http://localhost:3000/localStorage.js as "localStorage" from http://localhost:3000/client/dev/user/services/user.service.js

import { Injectable } from 'angular2/core';
import { Headers } from 'angular2/http';
import { loalStorage } from 'localStorage';

@Injectable()
export class UserService {
  private loggedIn = false;

  constructor(private http: Http) {
    this.loggedIn = !!localStorage.getItem('auth_token');
  }

}

NB: I am fairly sure there isn't an actual problem with the localStorage installation, as if I run npm list localStorage, then it tells me I have localStorage@1.0.3 instaled.

You did really installed a library for something that's builtin in the browser? — Eric Martinez, Mar 25 '16 at 12:08
@EricMartinez Otherwise, how do I get code like `localStorage.getItem('auth_token')` to work? — George Edwards, Mar 25 '16 at 12:14
[MDN localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) — Eric Martinez, Mar 25 '16 at 12:17

score 2 · Answer 1 · edited May 23 '17 at 12:17

If you want to use localStorage from an import, you need to configure it within SystemJS as described below:

System.config({
  map: {
    localStorage: 'node_modules/localStorage/lib/localStorage.js'
  },
  (...)
});

This way, you will be able to use the following import:

import loalStorage from 'localStorage';

See this question for more details since it's similar to the way to configure Lodash:

Lodash in angular2, declare var_:any not working

Angular2 dependency not injecting correct path

1 Answers1