I have found a nice JS component that's installed with Bower.
I'd like to know how I could import my component and let it be served by Pub.
So far I've tried to bower install it, and it gets downloaded in the root of my project in /bower_components
And then in my index.html I tried:
<link rel="import" href="../bower_components/paper-date-picker/paper-date-picker.html">
but Pub won't load the files (seems like it can't figure out relative paths in Bower).
By default, pub serves web as root folder, so you cant go deeper than root.
The easiest way to get this to work is to symlink bower_components folder into web folder, like pub does for packages folder.
Don't forget to remove .. before /bower_components in your href attribute after that.
Your path looks right ../ this is correct but go to /bower_components/paper-date-picker/paper-date-picker.html and make sure it is right.
or change that line to
../bower_components/paper-date-picker/paper-date-picker-dialog.html
and see if it works.
Related
I am currently going through a tutorial on Pluralsite on how to build a web app. The instructor wants me to install 'underscore' and 'jquery' using 'Bower'. I added bower and edited the bower.json file to add underscore and jquery however both have failed to install and I am not sure why.
I also added them via nuget and that works however I am not sure how to reference the nuget packages in my index.html file. Everything I have read seems to indicate that bower is the better option but at this point getting it to work either way would make me happy.
Without any real detail in your post you can check the following but this may differ a bit. But it's not clear if you actually see an error or whether you just can't see the files?
In Visual Studio 2015 if you open the .xproj file using a text editor you should see the following entries:
<ItemGroup>
<DnxInvisibleContent Include="bower.json" />
<DnxInvisibleContent Include=".bowerrc" />
</ItemGroup>
If you're using VS 2017 then Right Click your Project and click "Edit .csproj" and if you see anything similar to below your bower file is in the wrong location for the default setup:
<ItemGroup>
<Content Include="wwwroot\.bowerrc" />
<Content Include="wwwroot\bower.json" />
</ItemGroup>
Your bower.json should look like this:
{
"name": "asp.net",
"private": true,
"dependencies": {
"underscore": "~1.8.3"
,"jQuery": "~3.2.1"
}
}
When you save the bower.json file it will automatically get the packages.
It sounds to me like you already know this though and the actual getting of the package is failing. Do you know this because there is an error message or because you can't see the files? If you can't see the files check the wwwroot folder for a lib folder or another wwwroot folder and a lib folder within that.
If you have added the bower configuration file to a different location to the base of the project you may end up with the files in a wwwroot folder and the lib folder inside that from where your config file resides.
To use this file in your HTML you add a script tag or find the file in your Solution Explorer window and drag it into your HTML file when it is open and Visual Studio will automatically create the correct script tag and location for the file:
<script type="text/javascript" src="lib/jquery/dist/jquery.min.js></script>
If you look at jQuery in "Manage NuGet Packages" you should see it says "Incompatible: Use Bower instead". But that doesn't stop you from getting it using NuGet and you can locate the files in "$(UserProfile).nuget\packages\" which should mean "C:\Users\.nuget\packages\jquery\3.1.1\Content\Scripts\jquery-3.1.1.min.js" is what you would need to include on your HTML page but browsers tend to block links to the file system now so you would probably be better off using:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
That doesn't resolve your issue because that file could be removed from the host and then your link would fail and therefore it's best to fix the root of the problem but you may need to add a bit more detail to your post to get a clear answer I think but the above may help a bit.
Do you have Git installed for windows?
Try installing Git and then restart visual studio.
I ran into this problem when updating from VS2015 to VS2017.
You should see a folder called 'lib' after you've installed underscore.js.
Hope this helps!
Not sure if you are still having issues with this but it looks like this was a bug in Visual Studio 2017. I was having this same issue on the same tutorial.
Microsoft has since fixed it with their latest release of Visual Studio 2017 (15.3).
Update to the current version and then re-add the packages using bower and it should work correctly.
The bug has returned in VS 2019. Trying to install via NuGet the Jquery packages and I get the Incompatible. Use Bower instead.
I appreciate this is not a real problem, just curious...
I'm using bower version 1.7.2 and all my projects so far have a .bowerrc file in the main project folder.
On my current project (through an oversight with .gitignore) I lost the .bowerrc file. However bower still works just fine and everything gets created where I want it.
I've read the docs on the Bower site and there is nothing to suggest that it will work without the .bowerrc file, and plenty on stackoverflow suggests that I need the .bowerrc file - ALSO - there isn't a .bowerrc file in the file tree between the project folder and root (although there are plenty around in folders that have different paths)
My question then is: does bower work ok without a .bowerrc file (e.g. defaulting to directory:bower_components) ? or is there a way to see which .bowerrc file my bower is using?
Many thanks for any reply, although completely understandable if you read this and move on, like I said, my problem is that it works, and I don't think it should...
As the docs specify, the .bowerrc file can be either in the project dir, the user home (i.e ~/.bowerrc - depends on your OS) or the root dir.
If you didn't put it anywhere Bower uses defaults as specified here.
And to answer your question - the default directory for bower packages is bower_components
Yes , I tested in my project with out .bowerrc I am able to install packages with bower.If we don't specify the .bowerrc file bower_components directory is creating in the root directly which is default. If we want "bower_components" to be in specific location that should be specified in the .bowerrc file.
For example if we want bower_components folder in "app" folder
bowerrc file should specify directory location : "directory": "app/bower_components",
But while downloading packages from git ,if you computer has any proxy settings that need to be configured in .bowerrc file. If we don't specify the proxy settings in .bowerrc we wont be able to download packages form git.
My problem is I can't link to the bower_componets folder.
I am using web-starter-kit, and basically took those files into my dev environment/folder structure. I know that defeats the purpose of WSK, however I created a gulp work flow and wanted to try it out.
This is what i get in the console.
And this is my folder structure...
I am positive based on where the 'bower_components' folder exists this should be the path.
<script src="../../app/_bower_components/flowtype/flowtype.js"></script>
e.g. Start out of in development, then out of builds and dive into 'app'
Is there a bower config file that I am supposed to create?
When defining a package, Is it possible to put the bower.json file inside a subdirectory of my git repository, and reference it in other projects?
I know that the docs says to put it in the root, but I already have my own directory structure on my git repository and want to put it inside a subdirectory.
I'm wondering if exists an option inside .bowerrc file to configure bower.json location. That would solve my problem.
I know this question is pretty old but none of the answers address the OP's actual question.
It is possible to store your bower.json in a subdirectory of your project (or another project for that matter).
In your .bowerrc, use the cwd (current working directory) setting to specify where your json file is stored.
More info can be found in the bower configuration docs.
Bower will create the ./bower_components folder next to the bower.json file.
So, as long as you ensure that the paths of the js/css files are OK, you can put the components wherever you want.
In my case, I have to use different versions/dependencies for an HTML5 mobile app and a Bootstrap/Angular backend. So I have something like that:
/bower.json
/bower_components/
/app/bower.json
/app/bower_components/
Just be sure to include your bower.json files in the GIT tree and add the bower_components folders to the .gitignore file
Hope it helps
During the reproduction of this example, something strange happend: https://github.com/dart-lang/dart_by_example/tree/master/example/angular/basics/conditionally_switch_between_dom_elements
So created a plain Dart project in WebStorm, added angular.dart, copied the example. Everything works well, if the files are "web" directory.
BUT, after I moved the three files into a switch subdirectory, I have the following problem:
An error occurred loading file: package:angular/angular.dart
Do you have any idea? What did I missed.
If you added the subdirectory after you ran pub get then it may not have the packages symlink folder. Try running pub get (from your apps root directory) again which should generate any missing packages in subdirectories that may have been added, without re-downloading any dependencies.