localStorage is not defined (Angular Universal)

Question

I am using universal-starter as backbone.

When my client starts, it read a token about user info from localStorage.

@Injectable()
export class UserService {
  foo() {}

  bar() {}

  loadCurrentUser() {
    const token = localStorage.getItem('token');

    // do other things
  };
}

Everything works well, however I got this in the server side (terminal) because of server rendering:

EXCEPTION: ReferenceError: localStorage is not defined

I got the idea from ng-conf-2016-universal-patterns that using Dependency Injection to solve this. But that demo is really old.

Say I have these two files now:

main.broswer.ts

export function ngApp() {
  return bootstrap(App, [
    // ...

    UserService
  ]);
}

main.node.ts

export function ngApp(req, res) {
  const config: ExpressEngineConfig = {
    // ...
    providers: [
      // ...
      UserService
    ]
  };

  res.render('index', config);
}

Right now they use both same UserService. Can someone give some codes to explain how to use different Dependency Injection to solve this?

If there is another better way rather than Dependency Injection, that will be cool too.

---

UPDATE 1 I am using Angular 2 RC4, I tried @Martin's way. But even I import it, it still gives me error in the terminal below:

Terminal (npm start)

/my-project/node_modules/@angular/core/src/di/reflective_provider.js:240 throw new reflective_exceptions_1.NoAnnotationError(typeOrFunc, params); ^ Error: Cannot resolve all parameters for 'UserService'(Http, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'UserService' is decorated with Injectable.

Terminal (npm run watch)

error TS2304: Cannot find name 'LocalStorage'.

I guess it is somehow duplicated with the LocalStorage from angular2-universal (although I am not using import { LocalStorage } from 'angular2-universal';), but even I tried to change mine to LocalStorage2, still not work.

And in the meanwhile, my IDE WebStorm also shows red:

BTW, I found a import { LocalStorage } from 'angular2-universal';, but not sure how to use that.

---

UPDATE 2, I changed to (not sure whether there is a better way):

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { LocalStorage } from '../../local-storage';

@Injectable()
export class UserService {
  constructor (
    private _http: Http,
    @Inject(LocalStorage) private localStorage) {}  // <- this line is new

  loadCurrentUser() {
    const token = this.localStorage.getItem('token'); // here I change from `localStorage` to `this.localStorage`

    // …
  };
}

This solves the issue in UPADAT 1, but now I got error in the terminal:

EXCEPTION: TypeError: this.localStorage.getItem is not a function

Answer 1

Thanks for @Martin's great help. But there are several places below need to be updated to get it work:

• constructor in user.service.ts
• useValue in main.node.ts, main.browser.ts

This is how my codes look like now.

I would love to accept @Martin's answer when he updated.

BTW, I found a import { LocalStorage } from 'angular2-universal';, but not sure how to use that.

user.service.ts

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

import { LocalStorage } from '../local-storage';

@Injectable()
export class UserService {
  constructor (
    @Inject(LocalStorage) private localStorage) {}

  loadCurrentUser() {
    const token = localStorage.getItem('token');

    // do other things
  };
}

local-storage.ts

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

export const LocalStorage = new OpaqueToken('localStorage');

main.broswer.ts

import { LocalStorage } from './local-storage';

export function ngApp() {
  return bootstrap(App, [
    // ...

    { provide: LocalStorage, useValue: window.localStorage},
    UserService
  ]);
}

main.node.ts

import { LocalStorage } from './local-storage';

export function ngApp(req, res) {
  const config: ExpressEngineConfig = {
    // ...
    providers: [
      // ...

      { provide: LocalStorage, useValue: { getItem() {} }},
      UserService
    ]
  };

  res.render('index', config);
}

Answer 2

Update for newer versions of Angular

OpaqueToken was superseded by InjectionToken which works much in the same way -- except it has a generic interface InjectionToken<T> which makes for better type checking and inference.

Orginal Answer

Two things:

1. You are not injecting any object that contains the localStorage object, you are trying to access it directly as a global. Any global access should be the first clue that something is wrong.
2. There is no window.localStorage in nodejs.

What you need to do is inject an adapter for localStorage that will work for both the browser and NodeJS. This will also give you testable code.

in local-storage.ts:

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

export const LocalStorage = new OpaqueToken('localStorage');

In your main.browser.ts we will inject the actual localStorage object from your browser:

import {LocalStorage} from './local-storage.ts';

export function ngApp() {
  return bootstrap(App, [
    // ...

    UserService,
    { provide: LocalStorage, useValue: window.localStorage}
  ]);

And then in main.node.ts we will use an empty object:

... 
providers: [
    // ...
    UserService,
    {provide: LocalStorage, useValue: {getItem() {} }}
]
...

Then your service injects this:

import { LocalStorage } from '../local-storage';

export class UserService {

    constructor(@Inject(LocalStorage) private localStorage: LocalStorage) {}

    loadCurrentUser() {

        const token = this.localStorage.getItem('token');
        ...
    };
}

Answer 3

I have also ran in to the same issue. You can write inside 'isBrowser' check by importing below statement.

import { isBrowser } from 'angular2-universal';