Build two variation of the same projects with Angular

Question

I am working on a project which requires creating two variations of the same website (male and female) The two projects must each be in a different path, the first www.website.com/male/somelink and the second www.website.com/female/somelink

The two websites must be really the same except for a few things that must be different like the colors, the data retrieved from the API, or some specific routes for male or other for female To keep my code clean and consistent, I try to find the best solution to share as much code as possible with the two projects but I can't find the solution to share all this code and keep a large part in common

I read this article, but the problem I have with this method is that it doesn't have the possibility of having common routes, and even if I decide to create my component services in the root projects and the reimport in the routes, I also have no way to know in my code, in which section I am (male or female)

I also thought about creating two different builds and using the environment variables to define the male or female conditions in the code, but in this use, I don't see how to isolate part of the routes (routes must be common and other specific)

Could someone help me find the best solution please?

Thanks!

Answer 1

You can achieve it with route parameter.

Insert this in your app-routing.module.ts.

const routes: Routes = [
     :
    {path: ':gender/somelink', component: SomeLinkComponent},
]

In SomeLinkComponent.ts, do like this.

  public gender = this.route.snapshot.paramMap.get('gender');

  constructor(
    private route: ActivatedRoute,
  ) { }

Then you should implement your logic with the gender value.