How to reference package added by Bower?

Question

In VS.NET 2015, I've added a reference in bower.json for angularjs. This caused the angularjs package to be downloaded, which I can see in the Bower folder.

However, I'm not able to execute any angularjs code. I do have an ng-app in the HTML tag. If I add a CDN reference to the angularjs library, it works fine.

What am I missing to use the package downloaded by Bower?

Answer 1

what are you missing is referencing the downloaded libraries in bower_components folder in your index.html.

For example let's say you added restangular to bower. the library while reside in ./bower_components/restangular so in your index.html ( your SPA). you will reference it like this :

    <script src="../bower_components/restangular/dist/restangular.js"></script>

Beware sometimes you should add all the library main files ( js and css), for that you need to check the value of the main attribute included in the bower.json of the library . for our example in bower.json in ../bower_components/restangular/ we have:

"main": "./dist/restangular.js", In a the file .bowerrc you may define the directory for the downaloaded libraries in my example it will be bower_components.

In your .csproj file add the

    <Content Include="bower_components/restangular/dist/restangular.js" />

Use can see this example

Answer 2

Since more than likely for production deployment you won't be deploying things in bower_components directory, I suggest you setup a gulp or grunt task to copy all the JavaScript that you are going to use and probably minify and concat / bundle them into a folder in wwwroot like /lib or /js or whatever your convention is going to be and add a script tag pointing to that bundled version. There is a decent walkthrough by Mads Kristensen from the recent Build event that you might want to look at. He demoed all the things you would probably need to get your app running.