Why I got empty object on Angular route?

Question

Why I got empty object from ActivatedRoute params and how to fix that?

  routeId$ = this.route.params.pipe(
    tap((params) => console.log(params)), // <--- {}
    pluck('id')
  );

I defined the :id in the route of the children:

    RouterModule.forChild([
      {
        path: '',
        component: OrdersComponent,
        children: [{ path: ':id', component: OrderComponent }], <-- here.
      },
    ]),

Because I want to use facade, I declared it in the providers to have facade instance for the component:

...
providers: [FooFacade],
})
export class OrderComponent {
  constructor(private facade: FooFacade) {}
  doWork() {
    console.log('doWork');
    this.facade.doWork();
  }

FooFacade is using the service.

I try to find why I got an empty object and not the id so I found out that works:

 routeIdWorks$ = this.route.firstChild.firstChild.firstChild.params.pipe(
    tap((params) => console.log(params)),
    pluck('id')
  );

But it's not the ideal solution because I have to specify alot of firstChild. also a function that aggrigate firstChild feel worng.

So there is a way to make this to work?

  routeId$ = this.route.params.pipe(
    tap((params) => console.log(params)),
    pluck('id')
  );

I also defined those options in the router root:

  {
        paramsInheritanceStrategy: 'always', <---??
        initialNavigation: 'enabledBlocking',
        enableTracing: false,
      }

stackblitz