localStorage 的 Angular Universal 错误

Question

我有 Angular 4 项目，我决定将其转换为 Angular Universal，我按照本教程进行操作 https://coursetro.com/posts/code/68/Make-your-Angular-App-SEO-Friendly-(Angular-4-+-Universal)

但我在运行时遇到了这个问题

npm run start

问题显示

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] } }

我在我的项目中使用 sessionStorage 例子 设置.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");
}

Answer 1

在服务器端没有 sessionStorage 或任何其他浏览器特定的全局对象，因为它在 nodejs 中运行。在执行这样的代码之前，您应该使用isPlatformBrowser 来识别您现在是否在浏览器中。