当我单击模态然后显示重复的URL

Question

当我单击chrome的添加按钮控制台时，我有用于插入数据的Bootstrap模态，显示错误消息，如下图所示，我通过将添加按钮组件和引导模态组件分开来解决了问题，但是当我单击按钮时网址正在更改

按钮打开方式：

  <button class="btnAddPackage rainbow-text" data-toggle="modal" id="myBtn" 2 
  data-target="#exampleModal" 
  data-whatever="@mdo">
  <i class="fa fa-plus"></i> New Package</button>

HTML模式：

   <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" 
   aria-labelledby="exampleModalLabel" 
    data-backdrop="false"  aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" id="close-modal" data-dismiss="modal" aria-label="Close"  
        aria-hidden="true">X</button>
        <p class="modal-title" id="exampleModalLabel">Add Package</p>
    </div>
    <div class="modal-body">
      <form (ngSubmit)="create()">
        <div class="form-group">
          <input type="text" class="form-control" id="recipient-name" [(ngModel)]="formTest.name" name="name" placeholder="Packag Name">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="recipient-name" [(ngModel)]="formTest.price" name="price"  placeholder="Price">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="recipient-name" [(ngModel)]="formTest.count" name="count" placeholder="Points">
          </div>
          <div class="form-group">
              <input type="text" class="form-control" id="recipient-name" [(ngModel)]="formTest.createAt" name="createAt" placeholder="Number Of Month">
          </div>
          <button  role="button" class="btnAddPackage2" onclick="hideModal()">Add</button>
     </form>
    </div>
  </div>
</div>

脚本：

<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#exampleModal").modal("show");
});
$('#close-modal').modal('hide');
});
</script>

路由：

   {
    path:'package',
    component: PackageComponent
   }