ルーティングモジュールにInitialDataResolver
を含めるまで問題がないので、ルートにリゾルバーを実装することに関して問題があります。
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();
});
});
}
}
私が遭遇しているエラーはERROR Error: "[object Object]"
です。以下のスナップショットを参照してください。
Mozilla Firefox
を使用すると、この詳細なエラーがないことが発生しました。そのため、特定のエラーを確認するには、Google Chrome
に切り替える必要があります。
詳細については、 このリンク を確認してください。
Firefoxでの詳細なエラーの解決方法を見つけました。カスタムエラーハンドラーの定義とエラープロパティの検査に基づいています。これらの手順の後、エラーは適切に表示され、クロムに切り替える必要はありません。
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 { }
このエラーは、間違ったルーター宣言が原因で発生します。また、Firefoxでは決して正確なエラーは発生しません。 Chromeでルートファイルを確認します。 #angularjs-route
主にこのエラーは、「@ angular/fire」のデータベースオブジェクトを使用しているときに検出されます。
これはthis.db.object('/' + ....).subscribe(...)
を使用して修正できます
Webサーバーで--prodおよびHostを使用せずにビルドした場合、エラーはfirefoxの詳細を隠す可能性があります。Webサーバーでホストしている場合は、エラーの詳細を取得するために--prodでビルドを試みてください。
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)
}
上記のコードはあなたのために働きます。
rxjsバージョンが6.xの場合、.pipe(map(item => !!item))
を使用します
ワンタイムソリューション:dist/vendor.bundle.jsで関数defaultErrorLoggerを見つけて追加します:
for (var _i = 1; _i < arguments.length; _i++) {
values[_i - 1] = arguments[_i];
}
console.log(arguments);
console.error.apply(console, values); code here
その後、再コンパイルせずにページを更新します