chore(docs): add documentation showing how to include bootstrap

[Brocco]

Applies to #2711

[Meet91]

Following this updated doc to integrate Bootstrap with angular-cli results into following module conflicts:

• jquery.js
• tether.js

Details errors are as below:

**ERROR in multi scripts
Module not found: Error: Can't resolve 'C:\word\angular-demo\node_modules\jquery\dist\jquery.js' in 'C:\word\angular-demo\node_modules\angular-cli\models'
@ multi scripts

ERROR in multi scripts
Module not found: Error: Can't resolve 'C:\word\angular-demo\node_modules\tether\dist\js\tether.js' in 'C:\word\angular-demo\node_modules\angular-cli\models'
@ multi scripts**

I'm using below configuration:
angular-cli: 1.0.0-beta.20-4
node: 7.1.0(npm-4.0.3)
os: win32 x64
bootstrap : 3.3.7

Any help in this matter would be really appreciated!

Thanks,
Mitesh

[filipesilva]

@Meet91 that is because this document shows how to install the current bootstrap version, which is Bootstrap 3, while the readme shows how to install Bootstrap 4.

[filipesilva]

@Brocco if you want to show Bootstrap 3 instead of 4, then we should modify the e2e test accordingly. Or even better, add a new one.

[hansl]

Could you make sure the version is mentionned in the doc?

[Brocco]

Updated to include information for both version 3 and version 4

[hansl]

LGTM. Let's see Filipe's review.

[Brocco]

@filipesilva can you re-review this for me?

[filipesilva]

@Brocco bootstrap4 also needs a couple of scripts as listed in https://github.com/angular/angular-cli#global-library-installation:

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

I think bootstrap3 also needs jquery and bootstrap.js (but not tether).

[Brocco]

To me, there are different levels of how to utilize bootstrap.

I was just showing how to reference the CSS and not any of the component JS code. There are different ways to handle that from within angular applications. A lot of people don't want to include jQuery or any other libraries and instead do things the "angular way". Because if we show including those scripts then we should also show how to install both ng bootstrap and ng2 bootstrap which I think would be overkill.

[beeman]

I agree with @Brocco that this guide should not include any 3rd-party JS libs. With that being said, it might be good to emphasize that this guide just includes the style, and refer to the various Angular Bootstrap implementations.

[Splaktar]

For the latest Bootstrap 4 w/ SCSS, I use the following to get things working:

In styles.scss (other in a file imported into it):

@import '../node_modules/bootstrap/scss/bootstrap';
@import '../node_modules/bootstrap/scss/bootstrap-grid';

This way the SASS loader can do its thing properly and I get good IDE support. Not sure if it's the best way, but thought it might be helpful for those using SCSS.

Update: Thanks Mike for the new PR with SASS info!

[angular-automatic-lock-bot]

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.}