How to link to a package added by Bauer?

Question

In VS.NET 2015, I added a link in bower.json for angularjs. This caused the angularjs package to load, which I see in the Bower folder.

However, I cannot execute any angularjs code. I have an ng application in an HTML tag. If I add the CDN link to the angularjs library, it works fine.

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

Answer 1

what you are missing is linking to the loaded libraries in the bower_components folder in your index.html.

For example, let's say you added restangular to the conversation. the library is in ./bower_components/restangular , so in your index.html (your SPA). you will refer to it as follows:

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

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

"main": "./dist/restangular.js", In the .bowerrc file, you can define the directory for the downloaded libraries in my example, this will be bower_components.

In the .csproj file add

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

Use this example.

Answer 2

Since it is more than likely for a production deployment, you will not deploy things in the bower_components directory, I suggest that you configure the gulp or grunt task to copy all the JavaScript that you are going to use, and possibly minimize and merge / merge them into a folder in wwwroot like / lib or / js or whatever your agreement will be and add a script tag pointing to this bundled version. There is a decent walk through Mads Kristensen from the recent Build event, which you might want to watch. It has demonstrated everything you probably need to run your application.