0

To create the server-side application module, I used this command

ng add @nguniversal/express-engine

Then, I ran the command : npm run build:ssr , the build was successful.

After which I ran npm run serve:ssr, but got the below errors

*****************-u:~/practice-angular$ npm run serve:ssr

> practice-angular@0.0.0 serve:ssr /home/bhavya/practice-angular
> node dist/practice-angular/server/main.js

/home/bhavya/practice-angular/dist/practice-angular/server/main.js:364478
        redirectTo: localStorage.getItem('countryCode') || 'my'
                    ^

ReferenceError: localStorage is not defined
    at Object../src/app/app-routing.module.ts (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:364478:21)
    at __webpack_require__ (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:20:30)
    at Object../src/app/app.module.ts (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:364599:30)
    at __webpack_require__ (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:20:30)
    at Object../src/app/app.server.module.ts (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:364718:22)
    at __webpack_require__ (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:20:30)
    at Object../src/main.server.ts (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:388159:27)
    at __webpack_require__ (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:20:30)
    at Object../server.ts (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:364353:23)
    at __webpack_require__ (/home/bhavya/practice-angular/dist/practice-angular/server/main.js:20:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! practice-angular@0.0.0 serve:ssr: `node dist/practice-angular/server/main.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the practice-angular@0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bhavya/.npm/_logs/2021-09-03T08_32_02_929Z-debug.log

To resolve this error, I followed the steps mentioned in this answer. But still, I am not able to resolve the issue. Can anyone please help me to resolve this issue ?

ESCoder
  • 15,431
  • 2
  • 19
  • 42

1 Answers1

1

When your code get's executed on the server side, some of the API's which you have in the browser like localStorage and sessionStorage are not available. A solution would be to inject the PLATFORM_ID and use the isPlatformBrowser function to access this API's only if you are in a browser environment.

import { Component, OnInit, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser} from '@angular/common';

@Component({
  selector: 'your-component',
  templateUrl: 'your-component.component.html',
  styleUrls: ['your-component.component.css'],
})
export class YourComponent implements OnInit { 
  constructor(@Inject(PLATFORM_ID) private _platformId: Object) {}

  ngOnInit() {  
    if (isPlatformBrowser(this._platformId)) {
      // here you can access localStorage
    } else {
      // here you are on the server side and localStorage is not available
    }
  }
}

There a ways to get a localStorage in the server side e.g. with node-localstorage, but then you will have a localStorage on the server, one in the browser and you have to find ways to sync them if you want to share the data.

Roman P.
  • 309
  • 2
  • 10
  • thanks for your answer. In my project, I have several components and their .component.ts files. In each of these ts files there are `localStorage.get()` or `localStorege.set()` methods. So do I have to include the above approach in all these .ts files? – ESCoder Sep 04 '21 at 02:45
  • and even in a few of the service.ts files the return statement is like this `return localStorage.getItem('token')`. Do I have to include isPlatformBrowser in service.ts files as well ? – ESCoder Sep 04 '21 at 02:46
  • Yes, you have to do it everywhere you use the storage. – Roman P. Sep 06 '21 at 13:40
  • thanks for your reply ;-) Just one more question, how can I include the above code in `app-routingmodule.ts` ? – ESCoder Sep 06 '21 at 16:10
  • I have a line in app-routing.module.ts like -> `redirectTo: localStorage.getItem('code') || 'xy'`. How should I modify this localstorage usage ? Can you please help me out in this – ESCoder Sep 06 '21 at 16:36
  • Can you please look into this question -> https://stackoverflow.com/questions/69083955/angular-universal-localstorage-is-not-defined-error-for-routing-module-ts-file – ESCoder Sep 07 '21 at 07:25