I'm trying to be consistent with how I add libraries to my project that uses Bower and Angular. I've used bower to install my packages so far by doing things like
bower install angular
bower install angular-resource
It seems to have created files as follows:
/vendor/angular/angular.js
/vendor/angular-resource/angular-resource.js
Now, when I install angular-ui-route I get a different directory structure
/vendor/angular-ui-router/release/angular-ui-router.js
I am currently referencing all these from my index.html exactly as they are put down in the directory. My question is "this seems odd to have some in a "release" directory and others not. I want to be consistent and I want bower update to automatically update my files when it needs to. Am I lost or is that what everyone does?
There is a npm package (wiredep), grunt-plugin(grunt-wiredep) which look at all of the bower components you have, then determines the best order to inject your scripts in to your HTML file. It looks for placeholders <!-- bower:js -->, <!-- endbower --> in your HTML file and replaces them with the bower components' main files.
Since every bower component has a bower.json which tells where the main file is present for the component, you will have the correct script file injected into your HTML file. No need to worry when we update any bower package.
It's an important plugin I came across. Its used in Yeoman generation of Angular projects.
For more information on wiredep: https://github.com/taptapship/wiredep
grunt-wiredep: https://github.com/stephenplusplus/grunt-wiredep
Related
I'm really getting crazy!
I have bower on my project but since is now deprecated I need to migrate my vendor dependecies.
I'm using gulp to automatize injection on index.html.
Now, I want use only npm as package manager.
I tried mixing npmfiles and browserify, but my trouble is with the injection of css files and also with the order of the js' injection.
For the first case, css files are not catched from node_modules, this behavior is correct because npmfiles catch only the main file tagged on packages.json. I?m not been able to find something similar good about gulp + node_modules for css.
Someone of you have experience on that?
Is using npm for frontend vendor/plugin a logic error?
I've used Yeoman to scaffold my app (bower as dependency management) and cryptojslib is one of the packages I'm using. It ships with many algorithms, I actually only need rollups/sha256.js.
bower seems to automatically add <script> tags to the index.html to load all packages, but with cryptojslib it adds around 100 components and rollups and I only need to load one of them.
If I remove this from the index.html file, it comes back on the nexty bower install run.
Can I exclude a package from this html manipulation?
Remember
-> You can't ignore on behalf of other packages/files if it has the dependency.
The following way you can ignore some files not to add in your project while doing bower install
In your bower.json file add the following -
{
"ignore": "file_name_of_not_to_add"
}
I'm using the yeoman generator-gulp-angular to scaffold my app. I installed ng-18next with bower, and the package and it's dependency were both correctly installed in the bower_components directory. However, when I run gulp serve and view the source the components aren't being injected into page, so I get a module instantiation error. If I hard code the deps into the page there are no errors. I also tried bower install --save and the deps are inserted into the bower.json file correctly. Any ideas?
Thanks.
I had hard-coded script references in index.html. Even though they were commented, this caused them not to be injected with wiredep.
I try to work with AngularJS and Polymer (i actually use AngularJS for the Services eg. Token Auth and Polymer for the Material Design ) so i ask a simple method to build the scafolding for such kind of App (Polymer + AngularJS - localhost run with grunt) ? For the moment when i install :
yo angular MyApp
i have the bower_components in the root directory and if i try to install Polymer through :
bower install --save Polymer/polymer
So i install the Polymer in the AngularJS bower_components, (if i use the yo polymer generator the bower_components folder is in the /root/app/ folder and not in) And when i use grunt serve i get the Error (example with the core-toolbar) :
core-toolbar was not injected in your file.
Please go take a look in "/project-root/bower_components/core-component-page" for the file you need, then manually include it in your file.
so i think that i need to change something in the Gruntfile.js, but i do not know what ! Maybe is better use two bower_components folders ?
I solved the Problem, so i used the AngulaJS Generator for Yeoman, after that i moved the folder bower_components from the /project_root folder to the /project_root/app folder, so i modified the .bowerrc file with the new path of the bower_components folder :
{
"directory": "app/bower_components"
}
So now i can use bower to in install the Polymer elements that i need, with bower as usual :
bower install Polymer/core-toolbar
I do not use the --save for save the dependency in the package because when grunt/bower try to insert the link in the index.html file it fail, so
delete the Polymer dependencies from the bower.json file and add them manually, other hint remove the link already added by grunt/bower about polymer in the index.html file and add the webcomponents.js :
<!-- Polymer Section -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- My imports -->
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
hy
I've just installed yeoman and generator-angular.
everything works like expected, but changes in bower_components/bootstrap-sass-official/vendor/assets/stylesheets/* won't be caught in grunt watch or grunt serve tasks.
it's my first contact with bower and yeoman and I hope that this can be solved easily.
bootstrap.scss (imports all bootstrap scss files) is included in app/styles/main.scss witch will be converted to main.css in grunt watch task.
thank you for your help!
It is simple - just add this files to watch task in Gruntfile.js.
But it is entirely bad idea - you should not edit files under bower_components directory.
This files should be managed using bower, they are not even tracked by git and should not be(by default bower_components are in gitingore for this generator).
If you need to override something: import original scss file, and override what you need.