从依赖项从package.json移到bower.json后，Angular无法识别jQuery

Question

To start, I had angular , angular-bootstrap , and jquery in package.json and everything is compiled via browserify .

// package
"dependencies": {
    "angular": "~1.4.6",
    "angular-bootstrap": "~0.12.2",
    "jquery": "~2.1.4"
}

angular-bootstrap does not have anything higher than 0.12.2 in NPM, so I switched ng-bootstrap over to bower.json

// bower
"dependencies": {
    "angular-bootstrap": "~0.13.4"
}

And added aliases in my package.json

// package
"browser": {
    "angular-bootstrap": "./bower_components/angular-bootstrap/ui-bootstrap.js",
    "angular-bootstrap-tpls": "./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
}

After doing all this, jQuery is still available in the global namespace (accessible in the browser console), but angular directives no longer seem to pick use jQuery .

In my directive s if I log out the element or view its prototype ( element.__proto__ ) I only see the basic jqLite methods available, not the full jQuery that was available before I made the switch to bower (and that I see when looking at jQuery in the console).

// directive
.directive('myDirective', function() {
    return function(scope, element, attrs) {
        console.log(element);
        console.log(Object.getPrototypeOf(element)); // <-- No jQuery methods available, only jqLite
    }; 
});

I tried a few different ways of shimming dependencies, but I don't think this is necessary given that jQuery is loaded via package and not bower .

// package
"browserify-shim": {
    "angular-bootstrap": {
        "depends": "jquery:jQuery"
    }
}

Any help would be appreciated - not sure what I'm missing here.

Answer 1

Here is what I have and jQuery is rightly resolved on top of jqlite:

bower.json

  "dependencies": {
    "jquery": "2.1.4"
},
  "resolutions": {
    "jquery": "2.1.4"
}

package.json

  "browserify": {
    "transform": [ "browserify-shim" ]
  },

 "browser": {
     "jquery": "./bower_repo/jquery/dist/jquery.js"
  },
  "browserify-shim": {
    "jquery": "$"
  }