<p>After quite some digging I've decided to post the question and hopefully a proper answer will appear :)</p>

<p><strong>Goal</strong>: to have an angular application deployed in k8s, and exposing it via the nginx ingress with a customizable path AND parametrized routes.
Call that should be working:</p>

<pre><code>http://my-url/my-app/
http://my-url/my-app/a
http://my-url/my-app/b
http://my-url/my-app/c
http://my-url/my-app/c/my-id
</code></pre>

<p><strong>Problem</strong>: the parametrized route <code>/c/:id</code> is not supported. The factory is not called, and therefore the dynamic <code>APP_BASE_HREF</code> is not set. Call that is not working fine:</p>

<pre><code>http://my-url/my-app/c/my-id
</code></pre>

<p>There, the <code>APP_BASE_URL</code> is not properly detected, and angular tries to load resources from <code>http://my-url/my-app/c/runtime.js</code>.</p>

<p>There will be hard and long to provide a full code example, but some snippets will be provided for</p>

<h2>Kubernetes</h2>

<h3>nginx</h3>

<p><code>helm uninstall -n ingress-nginx nginx-ingress; helm install --namespace ingress-nginx nginx-ingress stable/nginx-ingress</code> (chart version: nginx-ingress-1.33.5; app version: 0.30.0)</p>

<h3>ingress configuration</h3>

<pre><code>---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: {{ template "my-app.ui.fullname" . }}
  labels:
    app: {{ template "my-app.name" . }}
    component: "{{ .Values.ui.name }}"
  annotations:
      kubernetes.io/ingress.class: "nginx"
      ingress.kubernetes.io/rewrite-target: /$2
      ingress.kubernetes.io/ssl-redirect: "false"
      ingress.kubernetes.io/use-regex: "true"
spec:
  rules:
  - host: "{{ .Values.root_url }}"
    http:
      paths:
      - path: "{{ .Values.ui.ingress.path }}(/|$)(.*)"
        backend:
          serviceName: {{ template "my-app.ui.fullname" . }}
          servicePort: 8085

</code></pre>

<p>where <code>{{ .Values.ui.ingress.path }}</code> could be anything like <code>/my-app</code></p>

<h3>angular application</h3>

<code>src/index.html</code>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;

    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<code>src/app/routing.module.ts</code>

<p>The routes we have.</p>

<pre><code>
const routes: Routes = [
    { path: '',
        redirectTo: '/overview',
        data: { title: 'Overview'},
        pathMatch: 'full' },
    { path: 'overview',
        data: { title: 'Overview'},
        component:  AComponent },
    { path: 'b',
        data: { title: 'B'},
        component: BComponent },
    { path: 'c/:id',
        data: { title: 'C detail'},
        component: CComponent },
    { path: 'c',
        data: { title: 'C detail'},
        component: CComponent },
    { path: '**',
        component: PageNotFoundComponent }

];


@NgModule({
  imports: [ RouterModule.forRoot(routes,
        {enableTracing: false}
    ) ],
  exports: [ RouterModule ]
})
export class RoutingModule { }

export const ROUTES_PATH = routes.map(p =&gt; p["path"])
</code></pre>

<code>src/app/app.module.ts</code>

<p>Just taking the <code>APP_BASE_HREF</code> modifier:</p>

<pre><code>import { getBaseLocation } from './common-utils';


/**
 * Modules
 */

@NgModule({
    declarations: [
        AppComponent,
...

    ],
    imports: [
        BrowserModule,
        RoutingModule
...
    ],
    providers: [
        Title,
        {
            provide: APP_BASE_HREF,
            useFactory: getBaseLocation
        }
    ],
    bootstrap: [ AppComponent ],
    entryComponents: [ t ]
})
export class AppModule { }

</code></pre>

<code>src/app/common-utils.ts</code>

<pre><code>import { ROUTES_PATH } from './routing.module';

export function getBaseLocation() {
    let paths: string[] = location.pathname.split('/');
    let basePath: string = (paths &amp;&amp; !ROUTES_PATH.includes(paths[1]) &amp;&amp; paths[1]) || ''; // Default: ''
    return '/' + basePath;
}

</code></pre>

<h2>References</h2>

<p><a href="https://stackoverflow.com/questions/49363210/providerfactory-for-app-base-href-token-is-called-before-app-initializer-is-done">Providerfactory for APP_BASE_HREF token is called before APP_INITIALIZER is done</a></p>

<p><a href="https://github.com/angular/angular/issues/25932" rel="nofollow noreferrer">https://github.com/angular/angular/issues/25932</a></p>

<p><a href="https://stackoverflow.com/questions/46190280/angular-2-set-app-base-href-with-a-value-from-a-promise-observable">Angular 2 Set APP_BASE_HREF with a value from a Promise / Observable</a></p>

<p>After @aakash suggestion, I have analyzed the <code>HashStrategy</code>.</p>

<p>To suuport <code>/:id</code> we can use <a href="https://angular.io/api/router/ExtraOptions" rel="nofollow noreferrer">HashStrategy</a> in the routing configuration <code>src/app/routing.module.ts</code>. With <code>HashStrategy</code> the, so called hash fragment, will not be sent to the server.</p>

<p><code>src/app/routing.module</code></p>

<pre><code>...
@NgModule({
  imports: [ RouterModule.forRoot(routes, {useHash: true}) ],
  exports: [ RouterModule ]
})

</code></pre>

<p>In that case, the requests will looked as follows:</p>

<pre><code>http://my-url/my-app/
http://my-url/my-app/#/a
http://my-url/my-app/#/b
http://my-url/my-app/#/c
http://my-url/my-app/#/c/my-id
</code></pre>
