desired route display in browser URL

Question

I have routings like this in my main module routing.

    const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full',
    },
    {
        path: 'home',
        component: MainComponent,
        children: [
            {
                path: '',
                loadChildren: () => import('../HR/human-resources.module').then(m => m.HumanResourcesModule),
            }
        ]
    }];

and in the human-resources-routing.module.ts I have routings like this.

    const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                component: QuestionGroupComponent
            },
            {
                path: 'reports',
                component: DatePeriodComponent
            },
            {
                path: 'states',
                component: StateWithTopPersonnelComponent
            },
            {
                path: 'personnel',
                component: StatePersonnelComponent
            },
            {
                path: 'personnel-detail',
                component: PersonnelDetailComponent
            }
        ]
    }];

For example now when I want to go to DatePeriodComponent I have a URL like this http://localhost:4200/home/reports but something which I want to show is a bit different. I want to show the URL like this http://localhost:4200/reports without home for all of my routs. How can I omit that or prevent to show in the URL?

Answer 1

That was the simplest way I've ever seen and I'm the angriest person in the whole world now... I did it just like this by setting an empty string to load the default module and component. I considered the dashboard module as my default module and dashboard component as my default component. Now when the app comes up I can see this URL http://localhost:4200

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardModule),
            },
            {
                path: 'HR',
                loadChildren: () => import('../HR/human-resources.module').then(m => m.HumanResourcesModule),
            },
        ]
    },
   
];

and in my dashboard module

const routes: Routes =
    [
        {
            path: '',
            canActivate: [AuthGuard],
            component: DashboardComponent
        },
    ];