Angular-cli: Question: use Bootstrap 4, navbar toggle does not work following directions in Wiki

Created on 17 Mar 2017  路  5Comments  路  Source: angular/angular-cli

Bug Report or Feature Request (mark with an x)

  • [ X] bug report -> please search issues before submitting
  • [ ] feature request

Versions.


@angular/cli: 1.0.0-rc.2
node: 7.7.3
os: win32 x64
@angular/common: 4.0.0-rc.3
@angular/compiler: 4.0.0-rc.3
@angular/core: 4.0.0-rc.3
@angular/forms: 4.0.0-rc.3
@angular/http: 4.0.0-rc.3
@angular/platform-browser: 4.0.0-rc.3
@angular/platform-browser-dynamic: 4.0.0-rc.3
@angular/router: 4.0.0-rc.3
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 4.0.0-rc.3

Repro steps.

I am using bootstrap 4 alpha 6, with Sass

I tried to follow the directions from this https://github.com/angular/angular-cli/wiki/stories-include-bootstrap, but when I follow the http://v4-alpha.getbootstrap.com/components/navbar/ first example, the toggle button does not work.

My understanding is using jQuery with angualr is not recommended.

Is there a way to get this to work ?

The log given by the failure.

Desired functionality.


Like to use Bootstrap 4 with Sass directly in angular 2 and get it's toggle functionality to work.

Mention any other details that might be useful.

Most helpful comment

@delasteve thank you so much for your prompt reply. This got me going. Again many thanks.

All 5 comments

Your understanding is mostly correct. Mixing Angular and jQuery is generally frowned upon, only because Angular can do most things you need to do in jQuery. This doesn't mean you can't include it in your project. Bootstrap's JS file depends both jQuery and Tether. In this case, including jQuery is fine.

There is currently a PR out there (https://github.com/angular/angular-cli/pull/5248) that will update the doc as soon as a few things are sorted out with the PR author.

This should get you going:
https://github.com/GoNode5/angular-cli/blob/9c264178d2c9a8dc3373648ccd84d5944ca589fc/docs/documentation/stories/include-bootstrap.md#adding-full-bootstrap-component-js-support

@delasteve thank you so much for your prompt reply. This got me going. Again many thanks.

@delasteve thanks a lot.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings