Angular Service abrir Modal Component erro.

Boa noite,

Eu tenho um serviço 'tela-alerta.service.ts'

@Injectable()
export class TelaAlertaService {

    alertaSubject: Subject<Alerta> = new Subject<Alerta>();

    constructor( public modalService: BsModalService ) { }

    abriTela() { 
        const modalRef = this.modalService.show(AlertaComponent, {class: 'modal-sm'});
    }




    success(messagem: string){

        this.abriTela();
        this.alerta(AlertaType.SUCCESS, messagem, "assets/icons/alert-icon-success.png");  
    }

    warning(messagem: string){
        this.alerta(AlertaType.WARNING, messagem, "assets/icons/alert-icon-success.png");
    }

    info(messagem: string){
        this.alerta(AlertaType.INFO, messagem, "assets/icons/alert-icon-cancel.png");
    }

    danger(messagem: string){
        this.alerta(AlertaType.DANGER, messagem, "assets/icons/alert-icon-cancel.png");
    }






    private alerta(alertaType: AlertaType, messagem: string, icone: string){
        this.alertaSubject.next(new Alerta(alertaType, messagem, icone));
    }

    getAlerta(){
       return this.alertaSubject.asObservable();
    }
}

e tenho o 'alerta.component.ts

import { Component, Input} from '@angular/core';
import { AlertaService } from 'app/shared/components/alerta/alerta.service';
import { Alerta, AlertaType } from 'app/shared/components/alerta/alerta';
import { TelaAlertaService } from 'app/services/tela-alerta.service';


@Component({
    selector: 'app-alerta',
    templateUrl: './alerta.component.html',
    styleUrls: ['./alerta.component.css']
})

export class AlertaComponent{

    @Input() mensagem: String = 'ERROR';
    @Input() icone: String = 'ERROR';

    constructor(public tela: TelaAlertaService) {

        console.log("chamou contrutor alertacomponent");

        /* this.telaAlertaService.getAlerta().subscribe(alerta =>{
            this.mensagem = alerta.messagem;
            this.icone = alerta.icone;
            console.log(alerta.messagem);
       }) */
    }


    getAlertaClass(alerta: Alerta){

        if(!alerta) return 'alert alert-danger';

        switch (alerta.alertaType){

            case AlertaType.DANGER:
                return 'alert alert-danger';
            case AlertaType.SUCCESS:
                return 'alert alert-success';
            case AlertaType.INFO:
                return 'alert alert-info'; 
            case AlertaType.WARNING:
                return 'alert alert-warning';      
        }
    }
}

Estou passando no construtor do "AlertaComponent" o Serviço para eu manipular e obter os dados. Mas me fornece o seguinte erro no console da IDE

WARNING in Circular dependency detected: src\app\services\tela-alerta.service.ts -> src\app\shared\components\alerta\alerta.component.ts -> src\app\services\tela-alerta.service.ts

e no console do browser aparece "Error: Can't resolve all parameters for AlertaComponent: (?)."

se eu tirar o parâmetro de serviço do construtor ao clicar no botão ele abre minha tela modal perfeitamente, mas se eu passa o serviço ae começa a dar esse problema e a aplicação não roda. Só que se eu não passar o serviço no construtor como vou ter acesso aos dados do serviço? Como irei passa os dados para "AlertaComponent" ??

Eu já pesquisei em tudo que é lugar e não acho a solução, sou novo em programação com Angular.

Alguém pode me ajudar?