Angular Dependency Injection: Inheritance and Services

Suppose I have the following setup:

export const REPOSITORY_NAME = new InjectionToken<string>('RepositoryName');
export const BASE_ENTITY_NAME = new InjectionToken<string>('BaseEntityName');


@Injectable()
export class RepositoryBase<TBaseEntity> {
 
  constructor(
    @Self() @Inject(REPOSITORY_NAME) private _name: string,
    private _api: ApiBaseService<TBaseEntity>
  ) {}


Injectable()
export class ApiBaseService<TBaseEntity> {

  constructor(
    private _http: HttpClient,
    @Inject(BASE_ENTITY_NAME) private _baseEntityName: string,
  ) { }

I now want to create a repository which inherits from my RepositoryBase and uses the base service:

@Directive({ // <-------- [1]
  providers: [
    { provide: BASE_ENTITY_NAME, useValue: 'Car' },
    { provide: REPOSITORY_NAME, useValue: 'CarRepository'},
  ]
})
export class CarRepository extends RepositoryBase<Car> {
}

This is not working, I suspect one of the main reasons being, that I cannot inject a token into the parent I am inheriting from. I thought @Self() could solve this, it doesn't.

I got rid of the @Injectable() decorator in the base class and passed all arguments directly into the RepositoryBase via my CarRepository constructor. But this does not feel right and still doesn't get the injections towards the ApiBaseService working. Maybe, because the "middle" class isn't injectible by itself.

No matter what I try, I always end up with something like:

ERROR NullInjectorError: R3InjectorError(MyFeatureModule)[CarRepository -> InjectionToken RepositoryName]: 
  NullInjectorError: No provider for InjectionToken RepositoryName!

I have also tried providing the BaseApiService in root, didn't help either.
The RepositoryBase is not provided, only the child CarRepository is provided in MyFeatureModule.

In addition, as denoted by [1], why do I have to use @Directive() in order to use providers? Why is an @Injectable() not allowed to have providers?

Background:

I want to inject multiple repositories (CarRepository, BicycleRepository etc.) into the same component, that's why I can't do that at the component level (or at least I don't know a way of doing that)

Am I fundamentally wrong about how this works?

Edit:
To be clear, CarRepository is only a directive because a pure injectable cannot have providers as mentioned above.
I would like to use this Repository like a normal service in a component:

@Component(
  template: '...',
  selector: 'my-component'
})
export class MyComponent {

  constructor(
    private _carRepository: CarRepository
  ) { }
}

Or is this not a good use-case for Angular DI? I could of course simply use standard constructor arguments and create everything myself, but that doesn't feel very angular-like.

directive has providers because it is related to a real node in DI tree, as it is used on some kind of element. for example <div my-directive></div>. injectable is something that can be injected. in most cases it is a service.

If I got the problem right, you need to have several repositories and you want to use them as separate typed classes. I would propose you something like this:

@Injectable()
export class RepositoryBase<TBaseEntity> {
  private _api = inject(ApiBaseService<TBaseEntity>)
  constructor(
    private _name: string,
  ) { if(!_name) throw new Error('cannot construct repository without a name');}


@Injectable()
export class ApiBaseService<TBaseEntity> {
  private _http = inject(HttpClient);
  constructor(
   private _baseEntityName: string,
  ) { }


// ...
@Injectable({provideIn: 'root'})
export class CarRepository extends RepositoryBase<Car> {
 constructor() {super('CarRepository'); }
}

@Injectable({provideIn: 'root'})
export class ApiCarService extends ApiBaseService<Car> {
  constructor(
) { super('Car'); }

If you want to have some logic generic in some component subtree (for example on some page you only work with CarRepository, but components should be able to accept any of your repositories) you could reuse that with the help of DI. for example in latest version of angular through router configuration

// route
{
  path: 'car-things',
  loadChildren: () => import('./cars/car.module'),
  providers: [
    {provide: ApiBaseService, useExisting: ApiCarService},
    {provide: RepositoryBase, useExisting: CarRepository},
  ]
}

// usage
@Component({...})
export FiltersGenericComopnent {
  private repository = inject(RepositoryBase) // will be CarRepository, if rendered in 'car-things' subtree
}