child route does not start my components (Angular13)

Question

I am having problems when I access a child route of a child route, when I go to the url I still get the same component and it does not change it.

{ path: 'PMI', component: AppContainerComponent, children: [
        { path: 'home', component: HomeComponent },

        { path: 'users', component: IndexUsersComponent, canActivate: [AdminGuard] },

        { path: 'patients', component: IndexPatientComponent, canActivate: [AdminGuard], children: [
            { path: 'basic-data/:id', component: BasicDataPatientComponent, canActivate: [AdminGuard] },
            { path: 'supplemental-data/:id', component: SupplementalDataPatientComponent, canActivate: [AdminGuard] },
        ]},
    ]},

If I go to a child route of the 'PMI' path as home, users and patients it works, but trying to access a child route of the 'patients' path as basic data or supplementary data does not open the component.

this is the route I use for basic data for example:

'localhost:4200/PMI/patients/basic-data/2'

Answer 1

Please add a router-outlet in IndexPatientComponent for child route to work.