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:
In console you can store errors like
ERROR Error: "[object Object]"
as global variable
and then get error message from object temp0.message
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
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.
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)
}
}
@NgModule({
declarations: []
imports: []
providers: [{provide: ErrorHandler, useClass: MyErrorHandler}], // <-- register MyErrorHandler
bootstrap: [RootComponent]
})
export class AppModule { }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With