There is no directive with "exportAs" for ng2-bootstrap

Question

I am trying to get the ng-2 bootstrap modal to work in my code. I have already gotten the ng2-bootstrap tooltip to work no problems, but the modal is giving me a lot of trouble. I have checked all the relevant github pages and stackover flow questions but I still cannot figure it out. this is my setup:

My router.html (the template)

...
<div class="modal fade" alertModal #staticModal="alert-modal" role="dialog" aria-labelledby="alertModal">`

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="alertModalTitle"></h3>
        </div>
        <div class="modal-body" id="alertModalBody">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>
...

Portion of my app.module.ts:

import { TooltipModule,ModalModule } from 'ng2-bootstrap';
@NgModule({
    imports: [ModalModule.forRoot(), TooltipModule.forRoot(), ...],
    declarations: [AppComponent,...],
    bootstrap: [AppComponent],
    providers: [...]
})
export class AppModule {}

My app.component.ts that uses this modal:

import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { MultistepService, StepDirection } from '../service/multistep.service';
import { ModalDirective } from 'ng2-bootstrap';

@Component({
    selector: 'my-app',
    host: {
      'class': 'container-fluid'  
    },
    templateUrl: './app/component/router.html'
})

export class AppComponent implements OnInit {

    @ViewChild('staticModal') 
    private alertModal:ModalDirective;

    <some methods here>
}

This is the error I am getting:

Template parse errors:
There is no directive with "exportAs" set to "alert-modal"

Is there anything I am missing? thanks in advance!

Answer 1

On the first line of your template, change #staticModal="alert-modal" to #staticModal