Compatibility with UI Bootstrap

[espositocode]

If I load the angular-strap module alongside the "ui.bootstrap" module, several javascript errors are reported and components do not work. Ideally, it would be great to mix and match the best components from both libraries.

The UI Bootstrap library can be found here: http://angular-ui.github.io/bootstrap/

[jsanders]

We are having success mixing and matching, by only loading the modules from each library that we actually use. You can pick and choose individual modules from AngularStrap by downloading them (and their dependencies!) directly from the dist directory and you can build a custom ui.bootstrap build pack with only the things you want. Our app module depends on all of ui.boostrap, but only the individual mgcrea.ngStrap.{foo} modules that we're using.

It works really well, and I think it's probably as good as you can do without renaming the services exposed by one or the other project.

[mgcrea]

I'm not sure there is anything I can do at ngStrap's level. Would be nice if the core could handle such conflicts gracefully (like a require namespaced with module mgcrea.ngStrap.modal.$modal).

[bcherny]

@mgcrea +1 a project i'm working uses both angular-strap and angular ui bootstrap for historical reasons. with the latter i'm able to use browserify to do stuff like

npm install angular-ui-bootstrap

then

require('angular-ui-bootstrap/src/modal/modal');
angular.module('myModule', ['ui.bootstrap.modal']);

It would be great to have that workflow for angular-strap too, so instead of my module depending on '$strap.directives' and potentially conflicting with other stuff, I could have arbitrary versions of anything in production by requiring and then depending on the more granular '$strap.directives.modal' instead.

[frapontillo]

I think there's the urgent need for a review of the naming system. I suggest prefixing every service with bs so names won't clash with the ones in ui-bootstrap.

My specific needs include using bsDatepicker from angular-strap and tooltip from ui-bootstrap, but the naming collision of the $tooltip service won't allow it. I haven't found any workaround for this, does anyone have a clue?

[rodrigoreis22]

I'm having name conflict problems with the $modal component. There's no good and elegant way to workaround this. I agree with prefixing all ng-strap names with bs.

[frapontillo]

I made a PR to ng-annotate (see olov/ng-annotate#47) in order to include a --rename option to (guess what) rename annotated references. I have also tested it with angular-strap and angular-ui-bootstrap and it's working flawlessly by renaming $tooltip, $modal and $button to something else of your choice; those are the only conflicting names I found.

[mgcrea]

@frapontillo, that's great news. Ping me once it lands and I'll try to add a "compat" build to AngularStrap. (renaming $tooltip to $bsTooltip, etc.).

[frapontillo]

WIll do.

[h2non]

I wish this PR will be merged soon ;)

[horiaIon]

this will solve a lot of headache :)

[k-funk]

+1
$bsTooltip would be much better, but I'd even prefer something more explicit for all services/directives, like $asModal / as-modal. bs means bootstrap. This isn't bootstrap, it's angularstrap! Kinda like angular-motion's css classes start with "am-".

[dgw2jr]

I am also having a conflict with ui.bootstrap and angularstrap $modal services.

[aowola]

+1 Same Problem $tooltip in AngularStrap and Angular-UI Bootstrap conflict

[mparisi76]

+1

[don-p]

+1. This makes use of ui-bootstrap and angular-strap together nearly impossible.

[smajl]

+1 Can't easily use timepicker from angular-strap, because $tooltip services conflicting. ($bsTooltip or similar would be nice)

[rlarge]

+1. It would be very nice to use both by prefixing them with $asModel or $asTooltip

[ghost]

+1.

[frapontillo]

Landed in ng-annotate-v0.10.

[DmitryEfimenko]

+1
It would partially help the problem if AngularStrap website allowed downloading custom builds just like Bootstrap UI and Bootstrap do

[sylvain-hamel]

@mgcrea, when you create the compat build, would you please avoid using $ or ng as a prefix. These should be reserved for the angular team. I suggest you use the fullname angularstrap , or as if you really want to make it short. Thanks

[mgcrea]

@frapontillo tried with an updated gulp-ng-annotate, and something like:

      .pipe(ngAnnotate({rename: [{from: '$tooltip', to: '$asTooltip'}]}))

Does not seem to have any effect on the output. Any ideas?

[sylvain-hamel]

@mgcrea based on my test with the ng-annotate command line, you must pass the -ra arguments otherwise it does not do anything. You might have to do the same with the gulp task.

[frapontillo]

@mgcrea from a quick read to the gulp-ng-annotate task, I can see that the add option is set to true only if the options are falsy. You should therefore specify at least:

 .pipe(ngAnnotate({add: true, rename: [{from: '$tooltip', to: '$asTooltip'}]}))

[sylvain-hamel]

@frapontillo and @mgcrea angular-strap's debounce conflicts with the ng-debounce package. I tried to rename it in angular-strap.js using ng-annotate but it seems like ng-annotate does not rename the constant defined here:

angular.module('mgcrea.ngStrap.helpers.debounce', [])

// @source jashkenas/underscore
// @url https://github.com/jashkenas/underscore/blob/1.5.2/underscore.js#L693
.constant('debounce', function(func, wait, immediate) {

[oliversalzburg]

Also, angular2 is around the corner and will properly address this.

That still leaves all the angular 1.x users without a solution though :(

[frapontillo]

Can't you ship a compatibility version alongside the main one?

[mgcrea]

I could, but the issue is that it could not easily be automated (mostly due to inline refs). But it could be done. Unfortunately, I don't really have the time to spend a couple of hours on this for now.

[frapontillo]

If you could provide some guidelines on the procedure you have in mind I could do that and open a PR here.

[e-cloud]

one of my gulp task is to use ngAnnotate to rename the some service

    fix_angular_strap: function () {
        return gulp.src(bower_dir+'/angular-strap/dist/angular-strap.js')
            .pipe(gulp.plugins.ngAnnotate({
                add: true,
                remove: true,
                rename: [
                    {from: '$tooltip', to: '$asTooltip'},
                    {from: '$button', to: '$asButton'},
                    {from: '$modal', to: '$asModal'}]
            }))
            .pipe(gulp.dest(bower_dir+'/angular-strap/fix'))
    },

@frapontillo if you don't know how to refactor, you can use ngAnnotate to rename the service, and then take diff compare, then you will know where to rename/refactor

[mgcrea]

We could use something like @e-cloud to produce a gulp build prefixing all services with bs, renaming directives from bs to as would break due to inline refs such as : https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js#L344

[frapontillo]

@e-cloud yes, I implemented the rename feature for ngAnnotate to address this very issue 😄.

Deal @mgcrea, if you're willing to bundle the compat build (something like dist/angular-strap.compat.js plus the min file?) I will get this done.

[mgcrea]

@frapontillo sounds good to me, just poc'd this in 7776d8c. Feel free to iterate upon the current master & test it. I'll release a new patch version as soon as you confirm everything is working.

[frapontillo]

👍

[mgcrea]

A compat build landed in d063b44. Released in v2.3.3.

Thanks!

[frapontillo]

[espositocode]

❤️

[ghost]

I'm loading it this way:
<script type="text/javascript" src="./manual-download/angular-strap.compat.js"></script>
<script type="text/javascript" src="./manual-download/angular-strap.tpl.js"></script>
<script type="text/javascript" src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

But I got this error:
Unknown provider: $$bsRAFProvider <- $$bsRAF <- $bsTooltip <- $bsTypeahead <- bsTypeaheadDirective <- $bsTooltip

I'm using it like the following:

Icon

Am I missing something?

Thanks,
-michael

[frapontillo]

Yeah, I f***ed up a renaming, it's already been fixed in master.
Sorry fellas!

[blah238]

@frapontillo @mgcrea can we get a release with 847d938?

[javierfvargas]

+1

[frapontillo]

@blah238 it's not up to me, pinging @mgcrea for this 😄

[javierfvargas]

Guys I'm having some problems using together angular-strap and ui-bootstrap (most recent versions). In some cases it is just some errors in the debug console but in others it is angular-strap getting unusable depending on the inclusion order.

Check this plunker.

http://plnkr.co/edit/QAA6mxfCV88QQPSUadUt

Hope it is useful.

[just-boris]

You should add angular-strap.compat.js build to get this resolved. See the updated plunk: http://plnkr.co/edit/9s3KYmEcIHoMpNt5R8X1?p=preview

[javierfvargas]

@just-boris thanks, it fixes it. Is this compat build something temporal or it is going to be this way now on?
FYI ui-bootstrap guys are also fixing it, now their master branch does not have this kind of issue.
http://plnkr.co/edit/QAA6mxfCV88QQPSUadUt

[Stoikko]

I am here to say that if you are reading this, and have both the compat and regular versions of the angular-strap.js and are still getting the console error, You may be using bs-tooltip in your code which you should change to uib-tooltip

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.