Angular Universal Support
See original GitHub issueAs 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);
}
Issue Analytics
- State:
- Created 6 years ago
- Reactions:19
- Comments:7
Top Results From Across the Web
Server-side rendering (SSR) with Angular Universal
This guide describes Angular Universal, a technology that renders Angular applications on the server. A normal Angular application executes in the browser, ...
Read more >angular/universal: Server-side rendering and Prerendering for ...
The Angular Universal project is a community driven project to expand on the core APIs from Angular (platform-server) to enable developers to do...
Read more >Angular Universal: Complete Practical Guide
This post will be a complete practical guide for getting started with Angular Universal. We are going to go start with an existing...
Read more >Angular Universal - server-side rendering for Angular.
Angular Universal is tool which allows server to pre-render Angular application while user hits your website for first time.
Read more >an adventure. Add angular universal support to… - Medium
1. Use the CLI. The angular CLI now supports generate universal which should save you a lot of typing time. In your application...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I think this is a better way to support it. Just add it conditionally to the metareducers if
window
is undefined. For example: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.
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:
This way you don’t have to change anything in your metareducer. All
window.localStorage
calls during SSR will simply go against the fake.