Search code examples
twitter-bootstrapangulartwitter-bootstrap-3drop-down-menung2-bootstrap

Angular 2 not working with Bootstrap 3 or 4


I started to implement my own Angular 2 app and I want to use Bootstrap framework. The problem is that I cannot plug Bootstrap with Angular 2. I saw that many people have the same problem but I didn't find solution. I installed bootstrap 3 via npm and I get min.css from index.html.

But when I put a dropdown menu in my code, this is not clickable:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
   <span class="caret"></span></button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
     <li role="presentation" class="divider"></li>
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
   </ul>
</div>

Solution

  • I found the solution! In system.config.ts is needed to add these 2 lines inside packages.

    packages: {
         'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
         'moment': { main: 'moment.js', defaultExtension: 'js' }
    }
    

    And this line inside map

    'ng2-bootstrap': 'node_modules/ng2-bootstrap',
    

    After that you should import ng2-bootstrap in the appropriate module and it works!