I've tried this a few different ways now but I've installed angular-ui-router with bower using the following command:
bower install angular-ui-router
Awesome, so I can see that there is an angular-ui-router folder in my bower_components directory. I can also see it listed as a dependency in bower.json
I included the path in my project like so
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
Running grunt serve, everything works perfectly. All of my bower components load and ui-router is routing.
Running grunt build, the build succeeds. But hosting the site, it seems that ui-router was not included. I get this all too familiar error
Module 'ui.router' is not available!
After poking around with grunt configs and a few other things, my last ditch effort was to stick a CDN script tag in my project
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
However, I get the same errors as above after running grunt build.
Is there some special trick to including ui-router? All other bower components seem to be included just fine.
Ok, I just saw that ui-router doesnt have the 'main' entry in package.json. I didnt have time to poke more. But, in bower.json file. You can add overrides entry so that it adds the file in packaging dependency.
"overrides": {
"angular-ui-router": {
"main": [
"release/angular-ui-router.js"
]
}
}
I'm not too sure, about the path. You can check your angular-ui folder to be sure. Also, dont point to the minified file, as uglify will run minification on your files.
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 created my angular application with "yeoman" using "yo angular" with grunt sass bootstrap.
But with node_mudules bower_component and all dev feature the empty project is 200mo sized
How can I build my application for production, include minify css/js and keep only used and required dependance.
EDIT
I don't understand the -1, thousand people use the angular-generator from yeoman and I can't find a build tutorial for this specific generator.
grunt build seems to work but the website is not displaying well.
grunt serve:dist build and run on serve but same problem as grunt build
The dev application ( it s just yo angular empty project )
After grunt serve, it works and i can navigate
After grunt serve:dist, it doesn't work and i can't navigate, it seems like "bower_components" are not build well
if you are using grunt do: "grunt build" or "grunt serve:dist", after the build you will get a dist folder, everything inside is you production app included minify css/js, you don't need anymore. And specify that for unknow reason "yo angular" add jquery to "devDependencies" but not in "dependencies"
in bower.json in you project.
You do not need to deploy everything from your project folder. Hope it help.
You do not need to deploy everything from your project folder. You can find info on this page.
Only files which you include/import in your index.html or css ( images or fonts ), are being used and tracked. Rest are all useless after deployment.
run gulp --production. firts it will clean dist folder (if exist) then move the minified and uglified file there.
I'm new to Yeoman and Angular and am trying to build a dist package of my app.
Currently in development all the dependencies load as expected, but when I run Grunt and grunt serve:dist the application loads but it is not able to find the bootstrap.css file. I have tried various different solutions such as:
Change the bower.json file to use bootstrap: '3.3.4' instead of version 3.3.5
Adding an overides object to the bower.json file as follows:
"overrides":{
"bootstrap":{
"main":[
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
I have tried both the bootstrap.css and bootstrap.min.css file in the index.html file as follows:
When I run the server the index.html file is looking to load the bootstrap file but gets the following error:
Failed to load resource: the server responded with a status of 404 and the address is http://localhost:9000/bower_components/bootstrap/dist/css.bootstrap.css
I have seen a bit of discussion about this problem online, but I have tried all the solutions suggested with no luck.
Can anybody shed any light on this?
It works fine in a development environmemt when I run grunt serve - but the problem arises in the production dist version.
Thanks
Linda
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.
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.