How can I hide the name of the component in the url?

The problem is that I don’t want to show the name of the Angular component. For example, if a user is logged, i don’t want that appears to him: user/profile. I only want it appears: profile.

These are the routes in App.routing-module.ts:

const routes: Routes = [
  {
    path: 'home',
    component:HomeComponent
  },
  {
    path:'',
    redirectTo:'home',
    pathMatch: 'full'
  },
  {
    path: 'user',
    loadChildren: 'app/usuario/usuario.module#UsuarioModule'
  },
  {
    path: 'profesional',
    loadChildren: 'app/profesional/profesional.module#ProfesionalModule'

  },
  {
    path: 'register',
    loadChildren: 'app/register/register.module#RegisterModule'
  },
  {
    path: 'login',
    component:LoginComponent
  },
  {
      path: '**',
      component:NotFoundComponent
  }
];

These are the routes in user.routing-module.ts:

const usuario_routes: Routes = [
  {
    path: '',
    component:UsuarioComponent,
    canActivate: [LoginGuard, RoleGuard],
        data: { 
                expectedRole: '0'
              } ,
    children:[
      {
       path: '',
       redirectTo: 'home',
       pathMatch: 'full'
      },
        {
         path: 'home',
         component: HomeComponent
        },
        {
          path: 'profile',
          component: ProfileComponent,
        },
        {
          path: 'changePassword',
          component: ChangePasswordComponent
        },{
          path:'**',
          component: NotFoundComponent
        }
    ]
    }
];

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

When the user is logged, I only want that on his url it appears: ./profile, not ./user/profile, for example.

Source: Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.