Angular Cannot read properties of undefined (reading 'provide')

Я хочу создать overlay service для создания оверлеев. Я пытаюсь запровайдить его в компонент оверлея, однако ловлю ошибку Cannot read properties of undefined (reading 'provide'). Думаю, проблема в том, что я использую компонент в сервисе, а этот сервис в компоненте.

import {ChangeDetectionStrategy, Component, forwardRef, Inject} from '@angular/core';
import { UOverlayService } from '../services/u-overlay.service';

@Component({
    selector: 'u-overlay',
    standalone: true,
    templateUrl: './overlay.component.html',
    styleUrls: ['./overlay.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        UOverlayService
    ]
})
export class UOverlayComponent {

    constructor(
        private _overlayService: UOverlayService
    ) { }

    public removeOverlay(): void {
        this._overlayService.deleteOverlay();
    }
}

import {Injectable, ViewContainerRef} from "@angular/core";
import {UOverlayComponent} from "../components/overlay.component";

@Injectable()
export class UOverlayService {

    constructor(private readonly _viewContainerRef: ViewContainerRef) { }

    public createOverlay(): void {
        document.body.appendChild(this._viewContainerRef.createComponent(UOverlayComponent).location.nativeElement);
    }

    public deleteOverlay(): void {
        this._viewContainerRef.clear();
    }
}