How to extend ProductListComponent

Question

We are trying to extend ProductListComponent, so we created:

export class CustomProductListComponent extends ProductListComponent {

  constructor(
    pageLayoutService: PageLayoutService,
    productListComponentService: ProductListComponentService
  ) {
    super(pageLayoutService, productListComponentService);
  }
}

but ProductListComponentService is not visible, so we decided to extend ProductListComponentService with this one:

@Injectable({providedIn: 'root'})
export class CustomProductListComponentService extends ɵe {
  constructor(
    protected productSearchService: ProductSearchService,
    protected routing: RoutingService,
    protected activatedRoute: ActivatedRoute,
    protected currencyService: CurrencyService,
    protected languageService: LanguageService,
    protected router: Router
  ) {
    super(productSearchService, routing, activatedRoute, currencyService, languageService, router);
  }
}

but now in the extended part we have this strange string 'ɵe'. What is the recommended way to extend ProductListComponent? Why is this string 'ɵe' there?

Answer 1

ProductListComponentService should be public, so it's a bug AFAIK. Please create an issue for this if you can, I'll try to escalate it.

For now, you could use that import via private symbol (ɵe) as a workaround, but take into account it can change with next lib release (so need to check it again when updating libs to a new version). Unfortunately, there is no better alternative at the moment.

To make it a little easier to read, you can import it like this: import { ɵe as ProductListComponentService }, so at least in actual extend you will be able to use a correct symbol.