Question

浏览器控制台显示以下错误：

zone.js:668 Error: Uncaught (in promise): [object Undefined]
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)
    at globalZoneAwareCallback (zone.js:1577)

我不知道在哪里查看源代码。

更新：在Firefox下打开的同一页面显示消息：

Error: Uncaught (in promise): [object Undefined]
Stack trace:
resolvePromise@http://localhost:4200/polyfills.js:3131:31
makeResolver/<@http://localhost:4200/polyfills.js:3041:17
setError@http://localhost:4200/scripts.js:979:21
messageCallback@http://localhost:4200/scripts.js:1092:25
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2738:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:4200/polyfills.js:2505:28
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask@http://localhost:4200/polyfills.js:2813:24
invokeTask@http://localhost:4200/polyfills.js:3857:9
globalZoneAwareCallback@http://localhost:4200/polyfills.js:3883:17
 zone.js:668

更新：如果错误与我新添加的拦截器源代码有关，以下是我处理可能的异常的方法：

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return this.addAuthHeader(request, next);
  }

  private addAuthHeader(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('=======>> Intercepting the http request to add the jwt token in the header');
    const tokenPromise: Promise<any> = this.keycloakClientService.getToken();
    const tokenObservable: Observable<any> = Observable.fromPromise(tokenPromise);
    tokenObservable.map(authToken => {
      console.log('Token value: ' + authToken);
      // Clone the request before it is sent to the server
      // as the original request is immutable and cannot be changed
      request = request.clone({
        setHeaders: {
          'Authorization': AUTH_HEADER_PREFIX + authToken
        }
      });
      console.log('=======>> The request has been cloned');
    });

    console.log('Handle the request in the interceptor chain');
    return next.handle(request)
      .catch(response => {
        if (response instanceof HttpErrorResponse) {
           if (response.status === 401) {
             // TODO redirect to the login route or show a modal
           }
          console.log('The error has been handled by the interceptor', response);
        }

        return Observable.throw(response);
      })
      .do((response: HttpEvent<any>) => {
        if (response instanceof HttpResponse) {
          console.log('The response has been handled by the interceptor', response);
        }
      });
  }

Answer 1

zone.js:668 Error: Uncaught (in promise): [object Undefined]

这是在源代码范围之外发生的错误。这就是为什么没有与您可以直接调试的内容相关的堆栈跟踪的原因。您可以尝试更改源代码或添加控制台日志消息，但我的猜测是它不会帮助您找到它。

这很可能是配置错误。

当Angular无法加载模块时，您可能会收到此错误。检查每个模块并确保所有声明，导入，导出等等都是正确的。确保使用正确的注射剂和注射参考物。

如果在应用程序启动后发生这种情况。延迟加载模块可能是一个失败。再次，重复上述步骤。

如果这不能帮助找到原因，那么您需要删除尽可能多的东西并慢慢添加它们。直到找到罪魁祸首。

创建一个不执行任何操作的空组件，并将其作为您的输入组件。注释掉所有提供者并注释掉所有声明。继续注释主模块使用的内容，直到应用程序成功启动。

慢慢地，添加您的提供者和声明，直到它再次中断。

这可以帮助您缩小模块配置中的问题所在。希望这就是问题的原因所在。

当然还有许多其他因素可能会引发此错误。

尝试在zone.runOutsideAngular(()=>{....})中包装使用第三方（无角度）库的源代码，以便区域不会跟踪任何未处理的错误。
在生产模式下构建应用程序，但启用源映射以进行调试。 ng build --prod --sourcemaps
添加ErrorHandler服务并查看是否收到错误。因为这将让你检查抛出的对象。您可以向模块中添加提供商，例如{provide: ErrorHandler, useClass: MyHandlerService} MyHandlerService实施ErrorHandler。

Answer 2

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CanvasService {
  constructor() { }

  getCanvasContext() {
    var canvas = document.getElementById("canvas") as HTMLCanvasElement;
    return canvas.getContext("2d");
  }

  // you can implement more canvas stuff here
}

如何在Angular promise或observable中找到错误？

2 个答案: