I am currently using a setup with NO Bower and ONLY using NPM with Gulp for AngularJS. I installed Font-Awesome from npm. I am also using SASS/SCSS for this.
The stylesheet is already loaded whenever i would run gulp serve as I have checked it using the developers tools in chrome, but the fonts are not loaded with it as I am outputted with a 404 when loading the font-awesome fonts.
I used the $fa-font-path variable with it. I imported it using:
$fa-font-path: "node_modules/font-awesome/fonts/";
#import "node_modules/font-awesome/scss/font-awesome";
Bootstrap-Sass is working fine and loading its font values using $icon-font-path despite of the fonts not being in the folder being served using:
$icon-font-path: "node_modules/bootstrap-sass/assets/fonts/bootstrap/";
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
I've tried importing it using CDN and it is fully working, but I do NOT want to use the CDN as an exception for this as I am using NPM for all my dependencies with this.
So, why is font-awesome not working? Am I doing something wrong with my setup?
I want to build a web application and I have started building this by using the angular fullstack generator. This generator uses webpack and this is the first time I am using webpack.
I have been trying to add the ngMaterial dependency by installing it with:
npm install angular-material --save
I have added the dependency in the config.entry.vendor from the webpack.make.js file but when I tried to import the ngMaterial i received the following error:
ERROR in ./client/app/app.js
Module not found: Error: Cannot resolve module 'ngMaterial' in path\client\app
# ./client/app/app.js 21:18-39
How can I inject a dependency with webpack?
I assume you pointed incorrect dependency name in webpack configuration: ngMaterial instead of angular-material.
ngMaterial is angularjs module name, you point it as a dependency in your angular app module, like this:
angular.module('app', ['ngMaterial'])
But in webpack dependencies you have to point node.js module name, which is angular-material (it is located in node_modules folder after you install it via npm install command)
EDIT:
If needed in your app.js you also have to import that module via import 'angular-material' or require('angular-material'). But if you include this dependency in separate vendor.js file (via webpack), than you shouldn't ever include this module in your app.js, cause it will upload to the page in vendor.js. You'll include it 2 times in your project if you do so.
I'm using a yeoman generator called "gulp-angular", I'm trying to add a dependency that is not an angular module, this dependency is a jquery plugin. I include this dependecy with: bower install depdency_name --save" but when I try to use it, I get an error, this error is a 404.
For a concrete example: I'm trying to include this dependency: blurry-image-load
So, when I want to include something dependency that is not an angular module, what I need to do, to make it work?
Thanks for your time
This is probably happening because the module you are trying to get isn't available in Bower.
You can however specify a full URL in Bower instead of a Bower package name. The URL should point to the main JavaScript file in their GitHub repo.
PS don't forget to add the script tag in the head of your HTML file.
This is for bundling JS files through Browserify with out Grunt/Gulp . but through npm script(defined in package.json)
I am working on Anularjs mature application. which have everything in it.
right now its using grunt for bundling all js files and then refers that bundle file to index.html page.
i couldnt find any article which can let me know how can i user browserify for bundling all the js files (with minimum changes)of my project.
Folder structure of Project.
or can someone please share any good article on it.
Thanks in advance.
I've been trying to create a project that utilizes AngularJS, Browserify and Gulp for an excellent developer experience, one that produces a distributable 'module' (in Angular parlance). The idea being to have a self-documented project, like Angular Bootstrap, that also produces a consumable distribution for use in another application.
We've had great results with Gulp, but we're having trouble with browserify/browserify-shim. Also, unfortunately, most of the examples out there either don't use gulp, or use gulp-browserify, which has been blacklisted/ended.
We're including AngularJS and JQuery from Google CDN as <script> tags and have declared "angular" : "global:angular" and "jquery" : "global:$" in our browserify-shim config in package.json, but we're getting "cannot find module" when we try to user var angular = require('angular') and var $ = require('jquery') inside of our browserified-code (once it runs in the browser).
I've created a sample project that distills this down close to the minimum.
A sample repository of the code is available at
Once cloned, you would run 'npm install', then 'bower install', then 'gulp' from the root of the multi-browserify folder to generate the files and run the test server.
With gulp running, you can access the live HTML at http://:4000/gulp.html
Any help would be greatly appreciated - I'm wondering if we've come across a bug/issue with the intersection of gulp, browserify, vinyl-source-stream, etc, or more likely, we just don't quite get it yet.
Is retrieving your dependencies from a CDN a requirement? If not, you could use npm for your dependencies and let browserify magic them up for you.
JQuery and Angular are available via npm, so using jquery as an example you could just declare it in your package.json, like so:
...
"dependencies": {
"jquery": "^1.11.1"
},
...
Alternatively, running npm install <package> -s from the directory containing your package.json will install the specified module and save it as a dependency in your package.json file.
Once you have installed this dependency (and any others you desire), you can go ahead and use them in your app.js as follows:
var $ = require('jquery');
$('<div>Hello World, I\'m using JQuery!</div>').appendTo('body');
Simple as that, and no need to use bower or browserify-shim - browserify will look through your node_modules folder and find them. I haven't tried this with angular (I had an issue trying to install it) - but it is available through npm, so it should work.
# assuming you have installed jquery locally instead of globally
npm install jquery -s # without -g flag
instead of require("jquery"), give relative path from source directory
require("./node_modules/jquery/dist/jquery.min.js");
Try the following:
<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>
OR
<script>var $ = jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>