Angular - Route opens wrong component

Question

When executing the route home/person/create loads the component person and not the create.

I have little experience with routes in Angular if anyone has any suggestions. Thank you!

The route home/person is okay:

Already the route home/person/create loads the list component instead of loading the create component:

Follow the structure below:

person.routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PersonListComponent } from './person-list/person-list.component';
import { PersonCreateComponent } from './person-create/person-create.component';

const personRoutes: Routes = [
  {
    path: '',
    component: PersonListComponent,
    children: [
      {
        path: 'create',
        component: PersonCreateComponent,
        data: {
          title: 'Novo'
        }
      }
    ]
  }
];

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

modules.routing.module

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

const modulesRoutes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        redirectTo: 'person',
        pathMatch: 'full'
      },
      {
        path: 'person',
        loadChildren: () => import('./person/person.module').then(m => m.PersonModule),
        data: {
          title: 'Pessoa'
        }
      }
    ]
  }
];

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

app routing.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DefaultLayoutComponent } from './core/containers';
import { P404Component } from './views/error/404.component';
import { P500Component } from './views/error/500.component';
import { LoginComponent } from './core/authorization/login/login.component';
import { RegisterComponent } from './views/register/register.component';
import { PageBaseComponent } from './core/containers/page-base/page-base.component';
import { AuthGuard } from './core/guards/auth.guard';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login Page'
    }
  },
  {
    path: 'register',
    component: RegisterComponent,
    data: {
      title: 'Register Page'
    }
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    canActivate: [AuthGuard],
    children: [
       {
         path: 'home',
         loadChildren: () => import('./modules/modules.module').then(m => m.ModulesModule),
      }
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' 
}) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

Answer 1

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PersonListComponent } from './person-list/person-list.component';
import { PersonCreateComponent } from './person-create/person-create.component';

const personRoutes: Routes = [
  {
    path: '',
    component: PersonContainerComponent, --> criar um person container com um <router-outler></router-outlet>
    children: [
      {
        path: '',
        component: PersonListComponent ,
        data: {
          title: ''
        }
      },

      {
        path: 'create',
        component: PersonCreateComponent,
        data: {
          title: 'Novo'
        }
      }
    ]
  }
];

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