Erro em criar Componente Modal

Boa tarde, Estou tentando criar um componente com a função de modal, porém quando faço ele gera o seguinte erro: Já refiz o código 2 vezes... e mesmo assim não consigo resolver o problema.

Can't bind to 'titulo' since it isn't a known property of 'modal-util'.
1. If 'modal-util' is an Angular component and it has 'titulo' input, then verify that it is part of this module.
2. If 'modal-util' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
        </table>

Segue aqui o código que fiz. component:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'modal-util',
    templateUrl: './modal.component.html'

})
export class ModalUtilComponent {

    @Input() id?: string;
    @Input() titulo?: string;
    @Input() descricao?: string;
    @Output() onConfirm: EventEmitter<boolean> = new EventEmitter<boolean>();

    confirmar() {
        this.onConfirm.emit(true);
    }
}

Html

<div class="modal fade" [id]="id" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalLabel">{{ titulo }}</h4>
            </div>
            <div class="modal-body">
                {{ descricao }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="confirmar()">Sim</button>
            </div>
        </div>
    </div>
</div>

Modulo

import { NgModule } from '@angular/core';

import { ModalUtilComponent } from './modal.component';


@NgModule({

    declarations: [ModalUtilComponent],
    exports: [ModalUtilComponent]
})
export class ModalModule { }

Modulo da APP

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import 'rxjs/add/operator/map';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

import { routing } from './app.routes'
import { ConcentradoModule } from './concentrado/concentrado.module';
import { ConcentradoRoutingModule } from './concentrado/concentrado.routes';
import { ModalModule } from './modal/modal.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    routing,
    ConcentradoModule,
    ConcentradoRoutingModule,
    ModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

E o html que está usando a diretiva

    <div class="container ">
        <table class="table table-bordered table-hover table-striped" *ngIf="concentrado.itens.length > 0">
            <thead>
                <tr>
                    <th>&nbsp;</th>
                    <th>Descrição</th>
                    <th>Proporção</th>
                    <th>Quantidade</th>
                    <th>Volume</th>
                    <th>R$</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of concentrado.itens; let i = index">
                    <th scope="row">{{i+1}}</th>
                    <td>{{item.descricao}}</td>
                    <td>{{item.proporcao}}</td>
                    <td>{{item.qtdItem}}</td>
                    <td>{{item.volume}}</td>
                    <td>{{item.vlr}}</td>
                    <td>
                        <!--<a href="#" class="btn btn-danger btn-block btn-sm" (click)="removeItem(i)">remover</a>-->
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modalExcluir" (click)="excluir(id)">
                    Excluir
                </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <modal-util [id]="'modalExcluir'" [titulo]="'Excluir Aluno'" [descricao]="'Deseja realmente excluir o aluno selecionado?'" (onConfirm)="onExcluir($event)">
        </modal-util>

    </div>