Best Online Tutorials

SQL Tutorial

Free SQL Tutorial

SQL Interview Questions

SQL Practice Questions

SQL Tips & Tricks

SQL Errors

SQL Books

Angular Tutorial

Free Angular Tutorial

Angular Interview Questions

Angular Practice Questions

Angular Tips & Tricks

Angular Errors

Angular Books

Node.js Tutorial

Free Node.js Tutorial

Node.js Interview Questions

Node.js Practice Questions

Node.js Tips & Tricks

Node.js Errors

Node.js Books

React.js Tutorial

Free React.js Tutorial

React.js Interview Questions

React.js Practice Questions

React.js Tips & Tricks

React.js Errors

React.js Books

SSIS Tutorial

Free SSIS Tutorial

SSIS Interview Questions

SSIS Practice Questions

SSIS Tips & Tricks

SSIS Errors

SSIS Books

SEO Tutorial

Free SEO Tutorial

SEO Interview Questions

SEO Practice Questions

SEO Tips & Tricks

SEO Errors

SEO Books

Javascript Tutorial

Free Javascript Tutorial

Javascript Interview Questions

Javascript Practice Questions

Javascript Tips & Tricks

Javascript Errors

Javascript Books

MongoDB Tutorial

Free MongoDB Tutorial

MongoDB Interview Questions

MongoDB Practice Questions

MongoDB Tips & Tricks

MongoDB Errors

MongoDB Books

Next.js Tutorial

Free Next.js Tutorial

Next.js Interview Questions

Next.js Practice Questions

Next.js Tips & Tricks

Next.js Errors

Next.js Books

How to use localstorage in angular universal ssr 

Prashant Surya  |   Nov 28, 2019  |  Views: 3082

Description:

Use of localstorage with Angular Universal SSR (Server Side Rendering) if is undefined or not defined


What are the questions this article covers:

  • LocalStorage with Angular Universal
  • localStorage is not defined in Angular Universal
  • How to use localStorage in angular universal
  • localStorage is not defined using angular universal
  • Use of LocalStorage with Angular Universal
  • localStorage undefined Angular Server Side Rendering
  • Angular Universal Server Side Rendering


Angular universal doesn't support the global variables like windows, documents, localstorage etc..

In that case we get undefined error for these variables.

Here I am discussing on the localstorage not defined error in angular universal SSR.

When we implement angular universal SSR , we have to install '@ng-toolkit/universal'

This comes with the alternative the global variables like localstorage , windows..




So the very first step is to import from library

import { LOCAL_STORAGE } from '@ng-toolkit/universal';

Now create the instance for the local_storage at constructor level by forcefully injecting using parameter decorator @Inject().

constructor( @Inject(LOCAL_STORAGE) private localStorage: any ) { }

You can create a separate service file of the localstorage methods.


Create a file localstorage.service.ts and copy paste the below code.

import { Injectable, Inject } from '@angular/core';
import { LOCAL_STORAGE } from '@ng-toolkit/universal';

@Injectable()
export class PersistanceService {
  constructor(@Inject(LOCAL_STORAGE) private localStorage: any ) { }
  set(key: string, data: any): void {
    try {
      this.localStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.error('Error saving to localStorage', e);
    }
  }
  get(key: string) {
    try {
      return JSON.parse(this.localStorage.getItem(key));
    } catch (e) {
      console.error('Error getting data from localStorage', e);
      return null;
    }
  }
}

Now you can easily get and set values in the localstorgae with angular universal while using ( SSR ) Server side rendering.

Comments:
Content Contributor
Prashant Surya

Prashant Surya

Software developer at Uniserve Data Technologies Pvt. Ltd.  |   Noida, Uttar Pradesh, India

I am a software developer, freelancer and trainer working on technologies likes. MEAN stack, MERN Stack, ASP.NET full stack, WebRTC, socket.io ,PWA, SQL, JavaScript, jQuery, HTML, CSS, SEO, responsive UI/UX designing... having 7 years of experience in development in multiple domains like, eCommerce, RTA, capital markets, education, real estate...


Read related articles

how to convert html to image in angular

Prashant Surya  |   Feb 12, 2020  |  Views: 3201

Copy to clipboard in angular

Prashant Surya  |   Jan 14, 2020  |  Views: 1034

How to use require() in angular typescript file

Prashant Surya  |   Jan 9, 2020  |  Views: 1418

Angular demo book - DritalConnect Suggestions

Prashant Surya  |   Dec 23, 2019  |  Views: 939

Angular 8 reactive Form with validation

Prashant Surya  |   Dec 23, 2019  |  Views: 1154

What's new feature in Angular 9

Prashant Surya  |   Dec 18, 2019  |  Views: 983

Home loan EMI calculator in Angular

Prashant Surya  |   Dec 17, 2019  |  Views: 2544

How to initialize an interface in typescript

Prashant Surya  |   Dec 13, 2019  |  Views: 1534

How to add google adsense in angular universal

Prashant Surya  |   Dec 2, 2019  |  Views: 2181

How to use localstorage in angular universal ssr

Prashant Surya  |   Nov 28, 2019  |  Views: 3083

How to manage multiple async calls in angular

Prashant Surya  |   Nov 27, 2019  |  Views: 1143

Angular tutorial - DritalConnect

Prashant Surya  |   Nov 20, 2019  |  Views: 928

How to import a javascript file in angular

Pooja Goel  |   Nov 15, 2019  |  Views: 1079

Topics to learn in Angular | Angular Tutorial

Prashant Surya  |   Sep 25, 2019  |  Views: 1179

Difference between Angular and React js

Abhishek Roy  |   Sep 25, 2019  |  Views: 1066

Want to sell your software ?-

If you want to sell your readymade software to the genuine clients or businessman, list your software with details and demo links.

  • Sell ERP
  • Sell Website Clones
  • Sell App Clones
  • Sell Readymade Portals
  • Sell Readymade Websites
  • Sell Mobile Apps
  • Sell Window Apps

Clients will find it using our advanced search filter and will contact you directly.

No any charge for the product lsiting.

Do you own a Company ?+

Property.sale

Buy or Sell Commercial Property+

Are you a freelancer ?+

Looking for a job ?+

Are you a Service Provider ?+

Are you a blogger ?+

Do you own an IT Institute ?+



Property.sale