在Angular2组件中使用Bootstrap导航

Question

I'm trying to use Bootstrap's navs into my Angular 2 app.

I followed the example (copy / paste) in the Bootstrap docs ( https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior ). I've included all the required CSS and JS in the .angular-cli.json file

 "styles": [
    "styles.css",
    ....
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/bootstrap/dist/css/bootstrap-grid.css",
    "../node_modules/bootstrap/dist/css/bootstrap-reboot.css",
    ....
  ],
  "scripts": [
    ....
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

but, even if it is rendered correctly, events on click are not handled (nothing happens on view).

I wouldn't use ng-boostrap, only if necessary. If someone could also explain how external 3rd party javascript libs (no typescript, just vanilla JS) could be used inside A2+ apps, I would appreciate.

EDIT

I think be helpful to know that the component in which the navbar is nested is dynamically created in a different moment from app loading (so when the scripts are executed). Could it be the reason why no click handler is bound to elements? If it so, how can I fix this?

EDIT 2

I've tried to use Boostrap in a component that has not been loaded at runtime (in the app-root component)... And works. So, why in a dynamically created component at runtime, this is not working anymore?

Answer 1

The bootstrap 4 beta and alpha are currently having problems with popper.js. Personally I had to use Bootstrap 3 instead for my angular 4 project.

Check your console for misfiring javascript.

EDIT

These are the errors I get in my console when trying to run it. popper error

EDIT2

I don't think load time is relevant as long as the javascript is loaded by the time it should be used on the html. If this is not the case maybe lifecycle hooks can help you. https://angular.io/guide/lifecycle-hooks