Angular 2: hide route component - apache

Question

I have a website built around angular 2 running on Apache. The same website (and same API) is used by different "groups". Let's say there are two groups: bees and wasps. My angular routing file looks like this:
{
path: '',
redirectTo: 'groupe/1',
pathMatch: 'full'
},
{
path: 'groupe',
children: [
{
path: ':groupe',
children: [
{
path: '',
component: HomePage,
},
...
To access a group, I can then simply go to http://myws.com/group/1 (for bees) and http://myws.com/group/2 (for wasps). Pages are then basically the same for each group (with different content, loaded from an API), like: http://myws.com/group/1/page/21.
Now the tricky part. First I want to access each "group" from a simplified, explicit URL: like http://myws.com/bees. I can do this by adding the following code to the router :
{
path: 'bees',
redirectTo: 'groupe/1',
pathMatch: 'prefix'
},
Problem is, the route changes in the URL back to /group/1. Is there a way to make the /bees permanent, hiding /group/1 ?
Now, I also want to access my bees group from a specific domain, like http://www.bees.com. Pages should render like http://www.bees.com/page/21 Is there a way with angular or Apache to do this?

Answer 1

Well, on the Angular side (meaning everything after the .com), you can do like so
export const bugRoutes: Routes = [
{ path: 'bees', canActivate: [MyBeeGuard], children: [
{ path: '', component: BeeHomeComponent },
{ path: '**', component: BeeHomeComponent }
]},
{ path: 'wasps', canActivate: [MyWaspGuard], children: [
{ path: '', component: WaspHomeComponent},
{ path: '**', component: WaspHomeComponent}
]},
{ path: '**', component: ChoseBugHomeComponent }
];
This way, your user will be redirected to any bug home, no matter the route. And if he inputs no route at all, he will be redirected to a component that "allows" him to chose which bug to chose