Question

我尝试为我的angular 2+应用程序添加服务器端渲染，以便使用SEO。

现在因为使用auth0-js而出现问题。

控制台输出如下：

ERROR { TypeError: Cannot read property 'location' of undefined at WebAuth.parseHash (C:\Dev\frontend\node_modules\auth0-js\src\web-auth\index.js:138:53) at e.handleAuthentication (C:\Dev\frontend\dist\server.js:8:523298) at new e (C:\Dev\frontend\dist\server.js:8:161974) at createClass (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:12509:20) at createDirectiveInstance (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:12 ) at createViewNodes (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:13815:53) at createRootView (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:13704:5) at Object.createProdRootView [as createRootView] (C:\Dev\frontend\node_modules\@angular\core\ s\core.umd.js:14397:12) at ComponentFactory_.create (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:1 6) at ComponentFactoryBoundToModule.create (C:\Dev\frontend\node_modules\@angular\core\bundles\c d.js:4070:29) __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] } } Unhandled Promise rejection: Cannot read property 'location' of undefined ; Zone: <root> ; Task: Promise.then ; Value: { TypeError: Cannot read property 'location' of undefined at WebAuth.parseHash (C:\Dev\frontend\node_modules\auth0-js\src\web-auth\index.js:138:53) at e.handleAuthentication (C:\Dev\frontend\dist\server.js:8:523298) at new e (C:\Dev\frontend\dist\server.js:8:161974) at createClass (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:12509:20) at createDirectiveInstance (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:12 354:37) at createViewNodes (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:13815:53) at createRootView (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:13704:5) at Object.createProdRootView [as createRootView] (C:\Dev\frontend\node_modules\@angular\core\ bundles\core.umd.js:14397:12) at ComponentFactory_.create (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:1 1299:46) at ComponentFactoryBoundToModule.create (C:\Dev\frontend\node_modules\@angular\core\bundles\c ore.umd.js:4070:29) __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] } } TypeError: Cannot read property 'location' of undefined at WebAuth.parseHash (C:\Dev\frontend\node_modules\auth0-js\src\web-auth\index.js:138:53) at e.handleAuthentication (C:\Dev\frontend\dist\server.js:8:523298) at new e (C:\Dev\frontend\dist\server.js:8:161974) at createClass (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:12509:20) at createDirectiveInstance (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:12 354:37) at createViewNodes (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:13815:53) at createRootView (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:13704:5) at Object.createProdRootView [as createRootView] (C:\Dev\frontend\node_modules\@angular\core\ bundles\core.umd.js:14397:12) at ComponentFactory_.create (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:1 1299:46) at ComponentFactoryBoundToModule.create (C:\Dev\frontend\node_modules\@angular\core\bundles\c ore.umd.js:4070:29)

我使用了auth0示例中的默认代码：

public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
  if (authResult && authResult.accessToken && authResult.idToken) {
    window.location.hash = '';
    this.setSession(authResult);
    this.router.navigate(['/']);
  } else if (err) {
    this.router.navigate(['/']);
    console.log(err);
    alert(`Error: ${err.error}. Check the console for further details.`);
  }
});

}

更新

我在我的身份验证服务中添加了角度通用陷阱。

现在，只要打开localhost：4200：

，我就会收到以下新错误

ERROR { Error: Uncaught (in promise): Error
at resolvePromise (C:\Dev\frontend\node_modules\zone.js\dist\zone-node.js:824:31)
at resolvePromise (C:\Dev\frontend\node_modules\zone.js\dist\zone-node.js:795:17)
at C:\Dev\frontend\node_modules\zone.js\dist\zone-node.js:873:17
at ZoneDelegate.invokeTask (C:\Dev\frontend\node_modules\zone.js\dist\zone-node.js:425:31)
at Object.onInvokeTask (C:\Dev\frontend\node_modules\@angular\core\bundles\core.umd.js:4783:33)
at ZoneDelegate.invokeTask (C:\Dev\frontend\node_modules\zone.js\dist\zone-node.js:424:36)
at Zone.runTask (C:\Dev\frontend\node_modules\zone.js\dist\zone-node.js:192:47)
at drainMicroTaskQueue (C:\Dev\frontend\node_modules\zone.js\dist\zone-node.js:602:35)
at ZoneTask.invokeTask (C:\Dev\frontend\node_modules\zone.js\dist\zone-node.js:503:21)
at Server.ZoneTask.invoke (C:\Dev\frontend\node_modules\zone.js\dist\zone-node.js:488:48) rejection: { [Error]
 __zone_symbol__currentTask:
  ZoneTask {
    _zone: [Object],
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: undefined,
    scheduleFn: undefined,
    cancelFn: null,
    callback: [Function],
    invoke: [Function] } }, promise: ZoneAwarePromise {
 __zone_symbol__state: 0,
 __zone_symbol__value: { [Error] __zone_symbol__currentTask: [Object] } }, zone: Zone {
 _properties: { isAngularZone: true },
 _parent:
  Zone {
    _properties: {},
    _parent: null,
    _name: '<root>',
    _zoneDelegate: [Object] },
 _name: 'angular',
 _zoneDelegate:
  ZoneDelegate {
    _taskCounts: [Object],
    zone: [Circular],
    _parentDelegate: [Object],
    _forkZS: null,
    _forkDlgt: null,
    _forkCurrZone: [Object],
    _interceptZS: null,
    _interceptDlgt: null,
    _interceptCurrZone: [Object],
    _invokeZS: [Object],
    _invokeDlgt: [Object],
    _invokeCurrZone: [Circular],
    _handleErrorZS: [Object],
    _handleErrorDlgt: [Object],
    _handleErrorCurrZone: [Circular],
    _scheduleTaskZS: [Object],
    _scheduleTaskDlgt: [Object],
    _scheduleTaskCurrZone: [Circular],
    _invokeTaskZS: [Object],
    _invokeTaskDlgt: [Object],
    _invokeTaskCurrZone: [Circular],
    _cancelTaskZS: [Object],
    _cancelTaskDlgt: [Object],
    _cancelTaskCurrZone: [Circular],
    _hasTaskZS: [Object],
    _hasTaskDlgt: [Object],
    _hasTaskDlgtOwner: [Circular],
    _hasTaskCurrZone: [Circular] } }, task: 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] } }

有人知道如何解决这个问题吗？

非常感谢

Answer 1

在服务器端，

窗口，文档和其他浏览器对象不是最终的。

您可以添加仅在您是服务器端或客户端时执行的平台特定代码。

https://github.com/angular/universal#universal-gotchas

注意：我没有看到示例代码，但是我甚至不确定如果你在反正之后导航到“/”那么重置哈希是有用的

如何使用角度通用的auth0

1 个答案: