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.
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 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.
I created a simple data listing app using angular js.
I used Bower and also grunt. Grunt to serve the project with a specific port. But have a error.. When i'm serve the project with Grunt, the bower_components are not working. I mean all the jquery and also angular parts get 404. I here by attach a link to my project.
Get my project here - https://github.com/chanakaDe/DemoApp
First clone it, then "npm install" and then "bower install".
Please tell me how to make them work.
Always get 404 errors like this
GET http://localhost:1701/bower_components/jquery/dist/jquery.js 404
You're specifying ./src as the root of your server in the Gruntfile. Unfortunately, bower installs it's dependencies a folder above it, in the root of your project. Your HTML has a couple of script tags with ../bower_components/[path to files], but this will not work.
You need to try to install the bower dependencies in your src folder. Add a .bowerrc file in the root of your project with the following content:
{
"directory" : "src/bower_components"
}
Then reinstall bower dependencies by doing:
$ bower install
Check if a folder bower_components have been created in your src folder.
Next replace ../bower_components with bower_components in the index.html file.
I am new to grunt, I am not able to understand initial setup. What I have done all is installed node and grunt and this is no where related to my project. My question is
1. how to add grunt to my project. I am using angular project. Do I have to add grunt inside my project folder? if yes, Where should I add and how should I add?
2. Many of the document says to update gruntfile.js. When I search I
can see so many gruntfile.js inside grunt\node_modules folder. Which
gruntfile.js file I should modify?
Grunt doesn't actually go into your angular project. Only libraries that are meant to show up in your client's browser (i.e. to actually run the webapp) should be injected into Angular.
Think of grunt as a tool to help you manage the build system outside of your angular project.
You could run npm install grunt --save-dev and it would create a package.json file with information regarding your dependencies.
www.egghead.io has some great resources on learning Grunt and Angular, as does http://build-podcast.com/.
Consider also looking into npm, gulp, webpack and other alternatives.
Step1 - Install node and npm
Step2 - npm install -g grunt-cli
Step3 - Create Gruntfile.js in your project root folder. Click here for sample file
Step4 - register a task
Step5 - Run Grunt
When I run yeoman install handlebars I get the following output:
Running "bower:install:handlebars" (bower) task
bower cloning git://github.com/components/handlebars.js
bower cached git://github.com/components/handlebars.js
bower fetching handlebars
It doesn't copy handlebars to the current project's plugins or vendors directory. It exits without an error message. Is this the right behaviour?
To me it seemed like a bug so I've created an issue on yeoman's github page. But I'm not sure.
To resolve this issue here's what I did. I realized yeoman did not install bower for me and it depends on bower for installing libraries. So, to resolve this issue - install bower manually like this: npm install bower -g