Issue with route resolver

Question

I have a lazy-loaded route with resolver:

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: MyComponent,
        resolve: {
          data: MyService
        }
      }
    ]
  }
];

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

My module

@NgModule({
  imports: [
    CommonModule,
    MyRoutingModule,
    ...
  ],
  declarations: [
    MyComponent,
    ...
  ],
  providers: [MyService]
})
export class MyModule {}

My service resolver:

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return forkJoin(
      this.getData1(),
      this.getData2(),
      this.getData3()
    );
  }

I am subscribing to the property data on my app component:

export class AppComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data.subscribe(x => {
      data = x; //x = undefined
    });
  }
}

The problems is x is always undefined
Any ideas why I can not access to my resolved data and how to fix that ?

UPDATE: I want to know when data resolved so I want to hide the spinner. As per @OneLunch-Man post my app component won't have an access to that data, so how would you work that out, all I need to know on my app component is when data has being resolved so I can do some UI state changes like hiding a spinner, etc

Answer 1

AppComponent is outside of the router-outlet and does not have access to this data. Only the child components of a route have access to that.

Answer 2

You can hide and show the spinner Using Router Events. And routerEvent also has a ResolveStart and ResolveEnd instance use that as per your need

constructor(private router: Router) {
    router.events.subscribe((routerEvent: Event) => {
      if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    }
    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
      this.loading = false;
    }
    });
  }

Ref:https://angular.io/api/router/RouterEvent#subclasses