v0.9.3 Angular and Bootstrap issues #738

New Issue

fergalmoran · 2025-08-09T17:17:29Z

fergalmoran commented

2025-08-09 17:17:29 +00:00

Originally created by @ghost on 5/20/2017

Spent ages on this today trying to figure what I'd broken upgrading from Angular 2 to 4. Hopefully someone will have an idea what I'm missing or it at least helps someone else...

Repro:

Download aspnetcore-spa v0.9.1 (Angular 2.4.5)
Remove all the html content from a file eg. \ClientApp\app\components\counter\counter.component.html
and copy and paste the below from https://www.w3schools.com/bootstrap/bootstrap_modal.asp

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <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">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Click the button and note a modal dialog appears

Do the same thing on v0.9.3 (Angular 4.1.2) as above
Note now that when clicking on the button the bootstrap modal dialog now doesn't work

Finally I found that adding the below makes it work, but I don't understand why when both Bootstrap and JQuery are both in package.json

Copy this into index.cshtml in your 0.9.3 project

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js" type="text/javascript"></script>

and now it works in Angular 4

*Originally created by @ghost on 5/20/2017* Spent ages on this today trying to figure what I'd broken upgrading from Angular 2 to 4. Hopefully someone will have an idea what I'm missing or it at least helps someone else... Repro: Download aspnetcore-spa v0.9.1 (Angular 2.4.5) Remove all the html content from a file eg. \ClientApp\app\components\counter\counter.component.html and copy and paste the below from https://www.w3schools.com/bootstrap/bootstrap_modal.asp ```  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> ``` Click the button and note a modal dialog appears Do the same thing on v0.9.3 (Angular 4.1.2) as above Note now that when clicking on the button the bootstrap modal dialog now doesn't work Finally I found that adding the below makes it work, but I don't understand why when both Bootstrap and JQuery are both in package.json Copy this into index.cshtml in your 0.9.3 project ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js" type="text/javascript"></script> ``` and now it works in Angular 4

fergalmoran closed this issue

2025-08-09 17:17:29 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#738