Twitter Bootstrap Question posted in

dotnet new angular twitter bootstrap collapse menu not working

Back in April, I ran these two commands:

dotnet new –install Microsoft.AspNetCore.SpaTemplates::*

dotnet new angular

I got a project created, and out of the box everything worked fine, including the bootstrap-driven collapsable menu. So, when the browser screen width was reduced, to simulate a mobile device, the menu items were hidden and replaced by the toggle navigation button. When that button was clicked, the menu items appeared in a dropdown as expected.

Yesterday I wanted to start a new project, and so I ran the exact same two commands (I re-ran the first to be sure I had the most current templates). The project was created, and at first all looked good. However, as soon as I narrowed the screen width, while the toggle navigation button did appear, clicking on it did nothing. I tried recreating a project several times, but the same problem continues. Right out of the box it does not work.

I don’t know how to debug this issue, or what might have changed since April.

Can anyone help?

Tags:

2

Answers


  1. 0

    So the answer is to add this to your app.component.ts at the top:

    import "jquery";
import "bootstrap";

    I found the answer this github issue provided by bm-software

    Login or Signup to reply.
  2. 0

    Came across this issue recently.
    after adding these lines on topmost of app.component.ts

    import "jquery";
import "bootstrap";

    make sure you add jquery on your package.json

    "jquery": "^3.3.1"

    the tricky and the last part is to include jquery.min.js on your .angular-cli.json file

    "scripts": [
    "../node_modules/jquery/dist/jquery.min.js"
  ],

    hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search