I’m deploying my first Angular app and I think I have problems of path or base url.

According to the server manager, the Web App is unique and serves multiple domains. Each domain is a unique USER with its own database and customizations. The App folder is located within the site that handles multi-domain requests.

Website folder on test/production servers: /www/website/
App folder on test/production servers: /www/website/pwa/

Example of the development, test and production urls:

Development: http://localhost:4200/

Local server test example:
https://test.myofficeserver.com/website_user1/pwa/
(url is solved by locating user1, as if the url https://test.myofficeserver.com/website/?user=user1 is visited)

Production server example:
https://www.user1domain.com/pwa/

So in my deployment, the app does not have the user url reference inside it, which then needs to be interpreted at the time it is requested.
I tried configuring two providers in app.config.ts to connect to a general end-point that would return the base url to me based on where the request came from :

{
  provide: APP_INITIALIZER,
  useFactory: getConfig,
  multi: true,
  deps: [CONFIG],
},
{
  provide: APP_BASE_HREF,
  useFactory: (config: Config) => config.baseHref,
  deps: [CONFIG],
}

So, in local server test in config.baseHref I receive: https://test.myofficeserver.com/website_user1

App root is loaded but not router-outlet, get error Error: NG04002: Cannot match any routes. URL Segment: ‘website_user1/pwa’ with url redirected to https://test.myofficeserver.com/

Looking on web I tried different solution, to hack base tag of index.html.
So I have removed providers and added into index.html:

<script>
  document.write(`<base href="${location.pathname}${location.pathname.endsWith('/') ? '' : '/'}"/>`);
</script>

Wow it works! But there are problems 🙁 . If I try to digit directly url with first route, it doesn’t work and I get server side 404:

https://test.myofficeserver.com/website_user1/pwa/ works and redirect me correctly to first route /dashboard, but if I try to visit directly https://test.myofficeserver.com/website_user1/pwa/dashboard I get server side 404 error.

When I develop without index.html’s hack on localhost, if I directly browse the url https://localhost:4200/dashboard it correctly resolves the route.

app.routes.ts

export const routes: Routes = [
  { path: 'login', component: LoginComponent},
  { path: 'dashboard', loadComponent: () => import('./features/dashboard/dashboard.component'), canActivate: [authGuard], canMatch: [isAdmin]},
  { path: 'addressbook', loadComponent: () => import('./features/addressbook/addressbook.component').then(c => c.AddressBookComponent), canActivate: [authGuard], canMatch: [isAdmin]},
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
];

In conclusion what is the correct way to handle this case of multi-domanis served by unique app? I couldn’t find any clear information, it seems like a borderline case but it seems strange to me.

I apologize for the length of the text, but it is difficult to make the situation clear and make the problem understood correctly.