Angular 2 nested components and routes?

Question

JavaScript

Good day, my dear friend.
I have the following problem: let's say there is the following application structure:

- AppComponent
-- TeamComponent
---  TeamMemberComponent
---- TeamMemberDetailsComponent.

The application has routes:

/
/team/:teamId
/team/:teamId/member/:memberId
/team/:teamId/member/:memberId/details

When requesting each route, a request is made to the api. The problem is that if the user navigates to the last route in the browser, an error may occur due to the fact that the parent component has not yet loaded. I would like to know how to solve this problem. One of the solutions I found is that for each route I need to create a resolver service, and write something like this in the routes

{
        path: 'team/:teamId',
        component: TeamComponent,
        resolve: {
            members: MembersResolverService
        },
        children: [
            ...
        ]
    }

Answer 1

if the child component requires data from the parent, then you probably need to make a preloader or hang *ngIf on the child component until the data in the parent is loaded and displayed.
Or get rid of such nesting of components