Pop-up modal with routerLink not working

Question

I am new to Angular2. Why is it when I added the "routerLink" in my "MODAL" I got an error while having the "routerLink"on the same .html outside the "MODAL"codes it works fine.

I have the codes below:

The 1st routerLink inside the container body works fine:

<a href="" [routerLink]="['BuyTest']" class="list-group-item">Try Test</a>

when I clicked "Try Test" link it works fine. But when I added the same routerLink in my modal as shown below, I got an error

<a href="" [routerLink]="['BuyTest']" class="btn btn-info btn-lg">
   <span class="glyphicon glyphicon-shopping-cart"></span> Test more 
</a>

ERROR:

Can't bind to 'routerlink' since it isn't a known native property (" ][routerlink]="['BuyTest']" class="btn btn-info btn-lg">

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    Support
                </div>
                <div class="list-group">
                    <a href="" [routerLink]="['BuyTest']" class="list-group-item">Buying Practice Test</a>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal" id="cart-info">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title"><span class="glyphicon glyphicon-shopping-cart"></span> Jason's shopping cart</h4>
                    </div>
                    <div class="modal-body">
                        <div class="cartfoot">
                            testing
                        </div>
                    </div>
                    <div class="modal-footer">
                        <p style="text-align:center">
                            <a href="" [routerLink]="['BuyTest']" class="btn btn-info btn-lg">
                                <span class="glyphicon glyphicon-shopping-cart"></span> Test more  
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

Please advice.

Wal

Answer 1

You need to @NgModule.imports: [ RouterModule ] to whatever module you declare component that needs the routerLink. In this case, whatever module declared the modal component, you need to imports the RouterModule into the module.