Angular Universal error with localStorage

Question

i have angular 4 project and i decided to convert it to angular universal , i followed this tutorial https://coursetro.com/posts/code/68/Make-your-Angular-App-SEO-Friendly-(Angular-4-+-Universal)

but i got this problem when i run

npm run start

the problem is displayed

Unhandled Promise rejection: sessionStorage is not defined ; Zone: <root> ; Task: Promise.then ; Value: { ReferenceError: sessionStorage is not defined
    at new Settings (E:\Angular\readuni\src\app\settings\settings.ts:2:17)
    at _createClass (E:\Angular\readuni\packages\core\src\view\ng_module.ts:148:1)
    at _createProviderInstance$1 (E:\Angular\readuni\packages\core\src\view\ng_module.ts:122:1)
    at resolveNgModuleDep (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:9520:17)
    at NgModuleRef_.get (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:10594:16)
    at resolveDep (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:11082:45)
    at createClass (E:\Angular\readuni\packages\core\src\view\provider.ts:360:1)
    at createDirectiveInstance (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:10783:37)
    at createViewNodes (E:\Angular\readuni\packages\core\src\view\view.ts:359:1)
    at createRootView (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:12114:5)
  __zone_symbol__currentTask:
   ZoneTask {
     _zone:
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } } ReferenceError: sessionStorage is not defined
    at new Settings (E:\Angular\readuni\src\app\settings\settings.ts:2:17)
    at _createClass (E:\Angular\readuni\packages\core\src\view\ng_module.ts:148:1)
    at _createProviderInstance$1 (E:\Angular\readuni\packages\core\src\view\ng_module.ts:122:1)
    at resolveNgModuleDep (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:9520:17)
    at NgModuleRef_.get (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:10594:16)
    at resolveDep (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:11082:45)
    at createClass (E:\Angular\readuni\packages\core\src\view\provider.ts:360:1)
    at createDirectiveInstance (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:10783:37)
    at createViewNodes (E:\Angular\readuni\packages\core\src\view\view.ts:359:1)
    at createRootView (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:12114:5)
ERROR { ReferenceError: sessionStorage is not defined
    at new Settings (E:\Angular\readuni\src\app\settings\settings.ts:2:17)
    at _createClass (E:\Angular\readuni\packages\core\src\view\ng_module.ts:148:1)
    at _createProviderInstance$1 (E:\Angular\readuni\packages\core\src\view\ng_module.ts:122:1)
    at resolveNgModuleDep (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:9520:17)
    at NgModuleRef_.get (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:10594:16)
    at resolveDep (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:11082:45)
    at createClass (E:\Angular\readuni\packages\core\src\view\provider.ts:360:1)
    at createDirectiveInstance (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:10783:37)
    at createViewNodes (E:\Angular\readuni\packages\core\src\view\view.ts:359:1)
    at createRootView (E:\Angular\readuni\node_modules\@angular\core\bundles\core.umd.js:12114:5)
  __zone_symbol__currentTask:
   ZoneTask {
     _zone:
      Zone {
        _properties: [Object],
        _parent: [Object],
        _name: 'angular',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

i'm using in my project sessionStorage example setting.ts

export class Settings{
    adminPerm = sessionStorage.getItem("isAdmin");
    adminPrem = sessionStorage.getItem("isAdmin");
    isLogged = sessionStorage.getItem("loggedIn");
    apiUrl = 'http://sitesite.me/api/';
    checkLogin = sessionStorage.getItem("loggedIn");
}

Practically a dupe... https://stackoverflow.com/questions/39085632/localstorage-is-not-defined-angular-universal — AT82, Nov 09 '17 at 19:57

score 1 · Answer 1 · answered Nov 08 '17 at 14:26

1

There is no sessionStorage or any other browser specific global objects on the server side since it runs within nodejs. You should use isPlatformBrowser to identify whether your are now in the browser before to execute code like this.

answered Nov 08 '17 at 14:26

Pavel Agarkov

3,633
22
18

Angular Universal error with localStorage

1 Answers1