Angular DI for standalone components with importing module on parent component and child...

Given the following structure:

• a parent standalone component named AppComponent
• a child standalone component called TableComponent, which should be a wrapper for a generic table

TableComponent internally uses the Table from primeng (imported from TableModule).

AppComponent needs some directives from TableModule (for example the non standalone directive SelectableRow from TableModule).

If putting everything together I get the following error:

ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_Table -> _Table -> _Table]: NullInjectorError: No provider for _Table!
​

I don't get why this runtime error occurs.

If adding

providers: [Table, TableService]


to one of both components, the error disappears, but it seems now there are two instances of Table around.

See live at https://stackblitz.com/edit/stackblitz-starters-u7h2az?file=src/table/table.interfaces.ts

Any way I can fix the missing dependency?

Continue reading...