How to locate an error in an Angular promise or observable?

Question

The browser console displays the following error:

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)

I have no idea where to look in the source code.

UPDATE: The same page opened under Firefox gives the message:

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

UPDATE: In case the error is related to my newly added interceptor source code, here is how I handle a possible exception:

  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]

This is an error that happens outside the scope of your source code. That's why there is no stack trace that relates to something you can debug directly. You might try changing your source code or adding console log messages, but my guess is that it won't help you find it.

It's most likely a configuration mistake.

You can get this error when Angular fails to load modules. Check each of your modules and make sure all of the declarations, imports, exports, etc.. etc.. are correct. Make sure that you use proper injection tokens and injectable references.

If this happens after the application starts. It might be a failure to lazy load a module. Again, repeat the above steps.

If that doesn't help find the cause, then you need to remove as many things as possible and slowly add them back. Until you find the culprit.

Create an empty component that does nothing and make this your entry component. Comment out all of your providers and comment out all of your declarations. Keep commenting out things the main module uses until the application starts successfully.

Slowly, add back your providers and declarations until it breaks again.

This should help you narrow down where in your module configuration the problem is. Hopefully, this is what the cause of the problem is.

There are of course many other things that could trigger this error.

• Try wrapping source code that uses third-party (none-Angular) libraries in a zone.runOutsideAngular(()=>{....}) so that any unhandled errors are not tracked by zones.
• Build your application in production mode, but enable source maps for debugging. ng build --prod --sourcemaps
• Add a ErrorHandler service and see if it catches the error. As this will let you inspect the thrown object. You add a provider to your module like this {provide: ErrorHandler, useClass: MyHandlerService} where MyHandlerService implements ErrorHandler.

Answer 2

this.modalService.open(content, {
  ariaLabelledBy: "title",
  size: "lg",
  backdrop: "static"
}).result.then((acao) => {

}, () => { // Add

});