Replace current webpack included Bootstrap w/jQuery with ng2-bootstrap

[wellingWilliam]

Found this. Native Angular2 directives for Bootstrap.

http://valor-software.com/ng2-bootstrap/index-bs4.html

This will allow us to use Bootstrap 4, which will compete with Material Design.

[tdonohue]

What a coincidence. I just stumbled on this myself today. I started playing with it this afternoon and it looks promising. I'll claim this one.

[wellingWilliam]

Yeah, it is seems better than how we build Bootstrap with jQuery and jQuery typings. I would like to try the pagination for it may help with the server side anchor tag creation. I am not seeing the navbar though. Maybe the classes will come with it.

Can you post a link for me to follow?

[tdonohue]

Unfortunately I failed to commit my work up to Github anywhere. So it's still sitting on my work computer. I did get the basics working following http://valor-software.com/ng2-bootstrap/ and https://github.com/valor-software/ng2-bootstrap

I can likely have something to show tomorrow. Though it wasn't hard to enable, just add it as a dependency and remove all the bootstrap / jquery stuff from our webpack.config.js. So if you need it now, you probably could get the basics in a short period of time. Otherwise I'll get something shared tomorrow

[wellingWilliam]

Sounds good. I still have some figuring out to do with the pagination. Thanks.

[tdonohue]

Been working on this today. I have an initial version that is "mostly working" at:
https://github.com/tdonohue/angular2-ui-prototype/tree/Add-ng2-bootstrap

It uses ng2-bootstrap, and also serves up all CSS / fonts within our server-side app (from a new /static path). This lets the Bootstrap styles be loaded whether JS is turned on or off.

The look and feel all works. But, the usual Bootstrap JS tools don't seem to work right yet.

[tdonohue]

Figured out the (obvious) step I missed. I wasn't properly importing directives into Components like:

import {BUTTON_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

And, referencing them in the Component directives like:

directives: [BUTTON_DIRECTIVES,...],

Unfortunately, though, as soon as I did that, I ran into this error from ng2-bootstrap when compiling our server app:

var w = window;
ReferenceError: window is not defined

It seems this is a "known issue" in ng2-bootstrap: valor-software/ngx-bootstrap#61

Essentially, n2-bootstrap doesn't "play well" with Angular Universal (yet), as it still relies on things (one being window) that are not available/defined on server-side.

[tdonohue]

I've added a new label: "progress blocked" which denotes that an issue is currently being blocked by progressing. This particular issue/ticket is being blocked by an issue in ng2-bootstrap (see above comment). So, it cannot progress until ng2-bootstrap issues are resolved.

[tdonohue]

This ticket is no longer blocked. The known issue is now resolved in ng2-bootstrap and the fix is in the v1.0.15 release.
valor-software/ngx-bootstrap@9d595d3

Moving this back into the "in progress" status, as I'll look into using v1.0.15 release to see if it now works for us.

[tdonohue]

Now dependent on Angular Universal updating to use Angular 2 beta 16 (which looks to be coming soon, see angular/universal#378)

ng2-bootstrap v1.0.15 requires beta 16, but latest Universal still requires beta 15.

[ghost]

beta 17 has been published. We should be able to use ng2-bootstrap now. It requires code changes in order to get dependencies upgraded to work completely and without exceptions. I have done this on the item creation branch I am working on.

[tdonohue]

ARGH. Unfortunately we still end up with a dependency mismatch when trying to run npm install.

Universal v0.9.9 jumped straight to requiring Angular 2 beta 17. But ng2-bootstrap v1.0.15 requires Angular 2 beta 16. They don't seem to want to get on the same page, and each currently requires an explicit version of Angular 2 (instead of a range).

[ghost]

ng2-bootstrap is ready to be brought in. It will require a bit of work replacing all the usage of bootstrap with ng2-bootstrap. If you want you can assign this card to me and I will take care of it.