Resolver Emitting Error ` ERROR Error: "[object Object]" `

Question

I'm having a problem with regards of implementing a resolver on my routes as it has no issue until I include InitialDataResolver on my routing module.

pages-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FrontComponent } from '../layouts/front/front.component';
import { HomeComponent } from './home/home.component';
import { DocsComponent } from './docs/docs.component';
import { InitialDataResolver } from './../shared/resolvers/initial-data.resolver';

const routes: Routes = [
  {
    path: '',
    component: FrontComponent,
    children: [
      { path: '', component: HomeComponent },
      { path: 'docs', component: DocsComponent }
    ],
    resolve: {
      init: InitialDataResolver
    },
  }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ],
  providers: [ InitialDataResolver ]
})
export class PagesRoutingModule { }

initial-data.resolver.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observer } from 'rxjs/Observer';
import { AppInitService } from '../services/app-init.service';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class InitialDataResolver implements Resolve<any> {

  constructor(private appInitService: AppInitService) {}

  resolve(route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<any> {
    return Observable.create((observer: Observer<any>) => {

      this.appInitService.init()
          .subscribe(data => {
            this.appInitService.preload();
            observer.next(data);
            observer.complete();
          });

    });
  }

}

The error that I'm encountering is ERROR Error: "[object Object]". see the snapshot below:

ivanavitdev · Accepted Answer · 2019-12-10 03:15:00Z

118

This lack of detailed error occurred when using Mozilla Firefox. so what you need to do is to switch over to Google Chrome to see the specific error.

UPDATED:

You can also Store the error as Global Variable

then you can type temp0.message to see the actual error message

edited Dec 10, 2019 at 3:15

answered Jun 27, 2018 at 5:43

ivanavitdev

2,9583 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Eray T Over a year ago

This is ridiculous. Didn't expect that at all. Thank you for your answer. Solved my issue.

secondbreakfast Over a year ago

Wow. Last thing I was expecting as well. Thank you.

ivanavitdev Over a year ago

@zero01alpha Your welcome mate :) I hope Mozilla fix this in the future

simbro Over a year ago

I hope Angular make their framework work better on Mozilla

Jonathan Muller Over a year ago

Funny thing is I have the error only on Firefox, Chrome works fine. How to debug this? :head-on-wall:

|

kaminarifox · Accepted Answer · 2019-06-04 08:39:28Z

22

In console you can store errors like

ERROR Error: "[object Object]"

as global variable

and then get error message from object temp0.message

edited Jun 4, 2019 at 8:39

answered Jun 4, 2019 at 8:33

kaminarifox

4331 gold badge5 silver badges14 bronze badges

1 Comment

Noufal Ibrahim Over a year ago

Bless you. This is indeed a lifesaver.

Meyhem · Accepted Answer · 2019-04-22 11:13:01Z

I have found solution for detailed error working in firefox. Its based on defining custom error handler and inspecting error properties yourself. After these steps, the errors were displayed properly, no need to switch to chrome.

Define custom error handler class:

import { ErrorHandler } from '@angular/core'

export class MyErrorHandler implements ErrorHandler {

    handleError(error: any) {
        // console.error(Object.getOwnPropertyNames(error))
        // Object.getOwnPropertyNames(error).forEach(p => console.error(error[p]))
        console.error(error.fileName, error.lineNumber, ':', error.columnNumber, '\n', error.message, error.rejection)
    }

}

Then register it as provider in main component

@NgModule({
    declarations: []
    imports: []
    providers: [{provide: ErrorHandler, useClass: MyErrorHandler}], // <-- register MyErrorHandler
    bootstrap: [RootComponent]
})
export class AppModule { }

xsong · Accepted Answer · 2018-06-26 11:09:26Z

0

resolve(route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot): Observable<any> {
    return Observable.create((observer: Observer<any>) => {

      this.appInitService.init()
          .subscribe(data => {
            this.appInitService.preload();
            observer.next(data);
            observer.complete();
          });

    }).map(item => !!item)
}

The code above will work for you.

if your rxjs version is 6.x you will use .pipe(map(item => !!item))

answered Jun 26, 2018 at 11:09

xsong

6702 gold badges5 silver badges18 bronze badges

1 Comment

AmbrosiaDevelopments Over a year ago

Why? Could you please provide an explanation or link or any justification.

amku91 · Accepted Answer · 2018-08-22 10:20:24Z

0

This error comes due to wrong router declaration. Also exact error never going to come in Firefox. Check route file in chrome. #angularjs-route

edited Aug 22, 2018 at 10:20

answered Aug 22, 2018 at 10:03

amku91

1,0481 gold badge11 silver badges22 bronze badges

Comments

Mostafa · Accepted Answer · 2018-11-04 14:28:32Z

0

The error could hide details on firefox if you build without --prod and host in web server, try to build with --prod if you are hosting on a web server to get details about the error.

answered Nov 4, 2018 at 14:28

Mostafa

88410 silver badges25 bronze badges

Comments

Tomasz Ćwik · Accepted Answer · 2019-02-27 08:53:51Z

0

one-time solution : find function defaultErrorLogger in dist/vendor.bundle.js and add:

for (var _i = 1; _i < arguments.length; _i++) {
    values[_i - 1] = arguments[_i];
}
console.log(arguments);
console.error.apply(console, values); code here

then refresh page without recompiling

answered Feb 27, 2019 at 8:53

Tomasz Ćwik

111 bronze badge

Comments

Dhanush · Accepted Answer · 2019-04-23 13:03:03Z

0

Mainly this error is found when using database object from '@angular/fire'

this can be fixed by using this.db.object('/' + ....).subscribe(...)

answered Apr 23, 2019 at 13:03

Dhanush

1207 bronze badges

Collectives™ on Stack Overflow

Resolver Emitting Error ` ERROR Error: "[object Object]" `

8 Answers 8

8 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

8 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related