In a context of a micro-front-end application I have a projected content in the app.module.ts that I want to put in a component that was instantiated via the router.

Here is a solution that does not work:

1. I referenced the projected content as follow

  <ng-template #projected>
    <ng-content></ng-content>
  </ng-template>

  <router-outlet></router-outlet>

2. I set the reference in a service

@ViewChild('projected', { static: true }) templateRef: TemplateRef<unknown>;
// ...
this.service.projectedRef = templateRef;

3. use it in the component that was created by the router

 <ng-container [ngTemplateOutlet]="service.projectedRef"></ng-container>

Any idea why doesn't that work and how I can solve this problem?

Note: when I use <ng-container [ngTemplateOutlet]="service.projectedRef"></ng-container> inside the app.component.html, it works fine, but not inside the routed component.