I'm trying to use Breeze with my AngularJs application.
I added breeze to my bower dependencies using:
bower install --save-dev breeze-client
This command added the dependency to my bower.json file as follows:
"dependencies": {
//Other dependencies here
"breeze-client": "~1.5.4"
}
The thing is that I'm using wiredep with gulp to automate my build process, but when wiredep adds my dependencies it only injects the breeze.debug.js file as follows:
<script src="/bower_components/breeze-client/breeze.debug.js"></script>
Therefore, when I add this dependency to my core module in Angular it doesn't find the 'breeze.angular' module dependency
(function () {
'use strict';
angular
.module('app.core', ['breeze.angular']);
})();
// This is the thrown error
// Error: [$injector:modulerr] Failed to instantiate module breeze.angular due to:
// Error: [$injector:nomod] Module 'breeze.angular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I know this is the error because when I add this reference manually, it works perfectly.
So my final question is: how can I add (after the breeze.debug.js dependency) the breeze.bridge.angular.js dependency located in the build/adapters folder using wiredep?
I managed to achieve this by editing my bower.json file. Overriding my breeze angular main dependency as follows:
bower.json file
"overrides": {
"breeze-client": {
"main": ["breeze.debug.js", "build/adapters/breeze.bridge.angular.js"],
}
}
This way I am referencing the main file and then the breeze.bridge.angular.js file. Now my bower dependencies are added as I need:
<!-- bower:js -->
// Previous dependencies
<script src="/bower_components/breeze-client/breeze.debug.js"></script>
<script src="/bower_components/breeze-client/build/adapters/breeze.bridge.angular.js"></script>
<!-- endbower -->
Now everything is working perfectly
Related
I am trying to implement show more show less functionality in my project using angular. Following are the versions of angular, bootstrap and jQuery in my project.
"angular": "^1.6.0",
"bootstrap": "^3.3.7",
"jquery": "2.2.4"
I have added the bower component to add this functionality. I ran following command:
bower install angular-read-more --save
I have also included the JS files.
Then I added module to the app:
angular.module("app", ["hm.readmore"]);
When I am running the project, I am getting error in browser console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module regulationLibraryApp due to: Error: [$injector:modulerr] Failed to
instantiate module hm.readmore due to: Error: [$injector:nomod] Module
'hm.readmore' is not available! You either misspelled the module name
or forgot to load it. If registering a module ensure that you specify
the dependencies as the second argument.
Where I had mistaken? Is there any other easy way to implement this functionality?
Looks like your bower dependencies are not loaded before angular application is bootstrapped.
Load your bower dependencies before you load angular app.
For example
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-read-more/readmore.min.js"> </script>
<script src="/my_angular_app/app.js"></script>
You're probability missing ngAnimate dependency.
To get it work 'hm.readmore' uses: ngSanitize, ngAnimate both plugins.
So, you can download it from npm repository https://www.npmjs.com/package/angular-animate
I've created a simple JavaScript application using AngularJS.
I'm using npm and Bower to manage my dependencies, Gulp to automatise my tasks and I want to use the CommonJS' module.exports/require() to tie everything up together: I decided to go for Browserify to bundle this all up.
There's my very empty and clean project on Github, if you wanna take a look.
In order to be able to require('angular'), I configured Browserify to shim that AngularJS into the available modules, using browserify-shim. Pretty straightforward, here's the relevant part of my package.json:
"browser": {
"angular": "./bower_components/angular/angular.min.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"angular": {
"exports": "angular"
}
}
It's pretty neat, my main JS file now looks like this:
'use strict';
var angular = require('angular');
angular.module('MyApp', [])
.controller('View1Ctrl', ['$scope', require('./view1/view1.js')])
.controller('View2Ctrl', ['$scope', require('./view2/view2.js')]);
And that works.
Now, I'm trying to get into some more advanced stuff, using external libraries available through Bower. They get installed under bower_components and look -well- just like my project, they've got a package.json, a bower.json and all.
Take for example ng-dialog, which also require('angular'). Once retrieved via bower install ng-dialog --save, I do two things:
Link their dist's JS file to a keyword (let's say ng-dialog) in my package.json
require('ng-dialog') in main main JS file in order to have my Angular module depend on theirs.
Here's the updated relevant part of my package.json (note that ng-dialog does not need to be shimmed):
"browser": {
"angular": "./bower_components/angular/angular.min.js",
"ng-dialog": "./bower_components/ng-dialog/js/ngDialog.min.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"angular": {
"exports": "angular"
}
}
... and my updated app.js file:
'use strict';
var angular = require('angular');
require('ng-dialog');
angular.module('MyApp', ['ngDialog'])
.controller('View1Ctrl', ['$scope', require('./view1/view1.js')])
.controller('View2Ctrl', ['$scope', require('./view2/view2.js')]);
I get the following error while Browserify-ing this up:
Error: Cannot find module 'angular' from 'C:\...\bower_components\ng-dialog\js'
After a good half hour of tweaking around, it turned out that SIMPLY deleting the package.json file from bower_components/ng-dialog makes it all go smoothly.
What is going on and how the hell should I bundle that ngDialog.min.js?
As stated in the Browserify Handbook
The module system that browserify uses is the same as node, so packages published to npm that were originally intended for use in node but not browsers will work just fine in the browser too.
Increasingly, people are publishing modules to npm which are intentionally designed to work in both node and in the browser using browserify and many packages on npm are intended for use in just the browser. npm is for all javascript, front or backend alike.
Therefore use the npm distribution of Angular and ngDialog packages rather than the bower ones
npm install angular ng-dialog --save
This will do away with the need to do the whole configuration in package.json and simply calling require() in the project will make browserify work.
When we require any node module in the project, browserify bundles the file present in the main field of the package.json of that respective node module. Currently as ngDialog's main field references the ngDialog.js file , therefore you will need to change it to ngDialog.min.js so that browserify bundles that file. (This isn't a major issue as you compress your browserify bundle using gulp-uglify)
I have forked your code and done the necessary changes in it - Check them here https://github.com/pra85/angular-seed
I've installed angular-formly-templates-bootstrap via bower on a project that I've been working on. But when I try to inject it in angular, I receive the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module bandar due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:nomod] Module 'formlyBootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.1/$injector/nomod?p0=formlyBootstrap
at http://localhost:3000/bower_components/angular/angular.js:68:12
at http://localhost:3000/bower_components/angular/angular.js:1949:17
at ensure (http://localhost:3000/bower_components/angular/angular.js:1873:38)
at module (http://localhost:3000/bower_components/angular/angular.js:1947:14)
at http://localhost:3000/bower_components/angular/angular.js:4355:22
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
at http://localhost:3000/bower_components/angular/angular.js:4356:40
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
The problem is, bower doesn't load angular-formly-templates-bootstrap in the browser. There are some other packages which are being loaded to the browser with bower. But I don't know what the problem is with formlyBootstrap.
Are you using gulp for inject bower dependencies? If so, find in gulp config something like that
exports.wiredep = {
exclude: [/bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
So all files ended with 'bootstrap.js' not injected. You can chage it with something like that
exports.wiredep = {
exclude: [/[^-]bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
Got the same error. I was working with gulp angular generator which seems to be ignoring formly bootstrap. I changed the main file in bower_components for angular-formly-bootstrap-template to dist/...bootstrap.min.js. Started working after that. Seems like the generator was ignoring files having bootstrap.js at the end
I am having an issue trying to add a module (angular-google-maps) to Mean.js
I ran:
bower install angular-google-maps --save
Then added 'google-maps' to public/config.js in the applicationModuleVendorDependencies array:
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils', 'google-maps'];
But when I try to run (using grunt) I get an error:
Error: [$injector:nomod] Module 'google-maps' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Is there some other step I need to do? On https://angular-ui.github.io/angular-google-maps/#!/use it says angular-google-maps depends on Lodash, do I have to add this in the module vendor dependencies also?
Angular-google-maps does not include the google-maps js api. You need to add it manually to your js-libs in config/env/all.js. This is also the place where you can add the lodash and angular-google-maps js files:
assets: {
lib: {
js: [
'//maps.googleapis.com/maps/api/js?sensor=false',
'public/lib/lodash/dist/lodash.underscore.js',
'public/lib/angular-google-maps/dist/angular-google-maps.js']
}
}
I would like to use the the node-bencoding package with my current RequireJS project setup, but I have been unable to get it configured.
I have followed these instructions and have ran:
npm install requirejs
npm install node-bencoding
Then in my app.js file I had changed it:
var requirejs = require('requirejs');
// Place third party dependencies in the lib folder
//
// Configure loading modules from the lib directory,
// except 'app' ones,
requirejs.config({
nodeRequire: require,
"baseUrl": "assets/js/lib",
"paths": {
"app": "../app",
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
"angularjs": "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min"
},
});
However when I load the page I get the error:
Error: Module name "requirejs" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded
I'm not exactly sure where I should have my node_modules directory. My directory structure is as follows: all my JS files are contained within src/assets/js - there is assets/js/app and assets/js/lib as is the RequireJS convention. Currently I have put my node_modules directory in src/.
Looks like you are trying to use it in a browser. And your application is not server side JavaScript, so RequireJS usage sample in a Node does not apply. In this case you would like to use node only to optimize your scripts.
I recently blogged about Understanding AMD & RequireJS, it might be useful.