Getting different behaviour of bootstrap for almos

I am facing a peculiar issue. My application shows a Bootstrap modal at start up. But once I click OK to close the modal, Bootstrap doesn't remove the <div class="modal-backdrop fade show"></div>. Due to this the controls in the background become unclickable.

To debug the issue, I thought to create a standalone simple application which has similar behaviour but I notice that in that application, Bootstrap removes the backdrop. I compared the html of my main app and the sample app and they are almost the same. What is the mistake I might be making? You might want to use some file diff tool to compare the HTMLs.

HTML of main app

<body class="modal-open">
  <app-root signup="" _nghost-c0="" ng-version="6.1.7">
    <app-dialog-box _ngcontent-c0="" _nghost-c1="" ng-reflect-dialog-i-d="appDialog"> <!--  FOR SOME REASON, ng-reflect-dialog-i-d IS ng-reflect-dialog-id in the sample app, notice i-d vs id -->
      <div _ngcontent-c1="" class="modal fade show" role="dialog" tabindex="-1" id="appDialog" style="display: block;">
        <div _ngcontent-c1="" class="modal-dialog modal-dialog-centered" role="document">
          <div _ngcontent-c1="" class="modal-content">
            <div _ngcontent-c1="" class="modal-header">
              <h5 _ngcontent-c1="" class="modal-title">CodingJedi</h5>
              <button _ngcontent-c1="" aria-label="Close" class="close" data-dismiss="modal" type="button">
                <span _ngcontent-c1="" aria-hidden="true">×</span>
              </button>
            </div>
            <div _ngcontent-c1="" class="modal-body">
              <p _ngcontent-c1="">Signup was successful</p>
            </div>
            <div _ngcontent-c1="" class="modal-footer">
              <button _ngcontent-c1="" class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
            </div>
          </div>
        </div>
      </div>
    </app-dialog-box>
  </app-root>

    <script src="/assets/javascripts/common/vendor/jquery/jquery-3.2.1.js" type="text/javascript"></script>
    <script src="/assets/javascripts/common/vendor/popper/umd/popper.js" type="text/javascript"></script>
    <script src="/assets/javascripts/common/vendor/bootstrap/bootstrap.js" type="text/javascript"></script>
    <script src="/assets/ui/polyfills.js" type="text/javascript"></script>
    <script src="/assets/ui/runtime.js" type="text/javascript"></script>
    <script src="/assets/ui/vendor.js" type="text/javascript"></script>
    <script src="/assets/ui/styles.js" type="text/javascript"></script>
    <script src="/assets/ui/main.js" type="text/javascript"></script>
      <!-- TODOM - Do I need popper.js??--> 

<div class="modal-backdrop fade show"></div> <!-- THIS DOESN'T GET REMOVED IN MY APP-->
</body>

html of sample app

<body class="modal-open">
  <app-root signup="success1" _nghost-c0="" ng-version="6.1.7">
    <app-dialog _ngcontent-c0="" _nghost-c1="" ng-reflect-dialog-id="appDialog"> <!-- NOTICE id instead of i-d -->
        <div _ngcontent-c1="" class="modal fade show" role="dialog" tabindex="-1" id="appDialog" style="display: block;">
            <div _ngcontent-c1="" class="modal-dialog modal-dialog-centered" role="document">
                <div _ngcontent-c1="" class="modal-content">
                    <div _ngcontent-c1="" class="modal-header">
                        <h5 _ngcontent-c1="" class="modal-title">CodingJedi</h5>
                        <button _ngcontent-c1="" aria-label="Close" class="close" data-dismiss="modal" type="button">
                            <span _ngcontent-c1="" aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div _ngcontent-c1="" class="modal-body">
                        <p _ngcontent-c1="">Unrecognised message: undefined</p>
                    </div>
                    <div _ngcontent-c1="" class="modal-footer">
                        <button _ngcontent-c1="" class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </app-dialog>
  </app-root>
    <script src="jquery-3.2.1.js" type="text/javascript"></script>
    <script src="popper.js" type="text/javascript"></script>
    <script src="bootstrap.js" )"="" type="text/javascript"></script>

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

<div class="modal-backdrop fade show"></div> <!-- WHEN I CLICK OK, BOOTSTRAP REMOVES THIS IN THE SAMPLE APP-->
</body>

Update

What I observed is that when the application starts, the html has <div class="modal-backdrop fade show"></div> in the end. Whe I click close button in the, another <div class="modal-backdrop fade show"></div> gets added and removed leaving the previous one still in the page!

Pic when app starts:

Pic when I click close:

the issue was something entirely different. The problem was in the way I was showing the modal. See <div class="modal-backdrop fade"></div> taking entire window space

The way I debugged it was interesting. I added few console.log in bootstrap.js and observed that the messages I had added were being printed repeatedly.