Angular Universal Support

As i tried out this (really nice and helpful) library i got surprised with the fact, that Angular Universal threw an Error. lcoalstorage is not defined

It seems that this library doesnt support Angular Universal. I think many would appreciate support for it.

I solved it in the meanwhile with:

const customStorage: Storage = {
  length: 0,
  clear: function (): void {
    if (window && window.localStorage) {
      window.localStorage.clear();
      this.length = window.localStorage.length;
    }
  },
  getItem: function (key: string): string | null {
    try{
      return window.localStorage.getItem(key);
    }catch{
      return null;
    }
  },
  key: function (index: number): string | null {
    try {
      return window.localStorage.key(index);
    }catch{
      return null;
    }
  },
  removeItem: function (key: string): void {
    try {
      window.localStorage.removeItem(key);
      this.length = window.localStorage.length;
    }catch{
        return ;
      }
  },
  setItem: function (key: string, data: string): void {
    try{
      window.localStorage.setItem(key, data);
      this.length = window.localStorage.length;
    }catch{
        return ;
      }
  }
};

export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return localStorageSync({keys: [{auth: ["token"]},{shopping_cart: ["products"]}], rehydrate: true, storage: customStorage})(reducer);
}

[bufke]

I think this is a better way to support it. Just add it conditionally to the metareducers if window is undefined. For example:

const metaReducers: Array<MetaReducer<any, any>> = [];
const localStorageSyncReducer = (
  reducer: ActionReducer<any>
): ActionReducer<any> => {
  return localStorageSync({ keys: ["foo"], rehydrate: true })(reducer);
};
if (typeof window !== "undefined") {
  metaReducers.push(localStorageSyncReducer);
}

If this works for people - I think the best solve is to just document not to add the meta reducer when running in node. I can’t think of any reason someone would want localstorage sync to happen server side.

Update never mind this doesn’t work. It works without --prod but localstorage sync just doesn’t happen with --prod. I tried rearranging it and it seems no method that involves conditionally adding the metareducer works.

[magnattic]

Building on @Joniras solution from above, I simply faked the localStorage for the whole application in my server.ts during the universal startup, similar to how I faked window and document with domino:

const fakeStorage: Storage = {
  length: 0,
  clear: () => { },
  getItem: (_key: string) => null,
  key: (_index: number) => null,
  removeItem: (_key: string) => { },
  setItem: (_key: string, _data: string) => { }
};

const domino = require('domino');

const win = domino.createWindow(template);
(global as any)['window'] = win;
(global as any)['document'] = win.document;
(global as any)['navigator'] = win.navigator;
(global as any)['localStorage'] = fakeStorage;

This way you don’t have to change anything in your metareducer. All window.localStorage calls during SSR will simply go against the fake.