i am trying to use angular with breeze and requireJS
how ever i am getting error of
Uncaught Error: Module name "ko" has not been loaded yet for context: _. Use require([])
i have configured
define("breezeConfig", ["breeze"], function(breeze) {
// configure to use the model library for Angular
//breeze.config.initializeAdapterInstance({ dataService: "OData" });
breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
// configure to use camelCase
breeze.NamingConvention.camelCase.setAsDefault();
var serverAddress = "/odata/";
var manager = new breeze.EntityManager(serverAddress);
return breeze;
});
and in the main module
require.config({
baseUrl: "/app",
paths: {
"jQuery": "lib/jquery-1.8.2",
"angular": "lib/angular",
"angular-resource": "lib/angular-resource",
"text": "lib/text",
"Q": "lib/q",
"breeze": "lib/breeze.min"
and so on
at the end
require([
'jQuery',
'Q',
'breeze',
'angular',
'app',
'controllers',
'routes',
'breezeConfig'
], function ($, angular, app) {
angular.element(document).ready(function () {
angular.bootstrap(document, ['AMail']);
});
where am i wrong?
Yes ... we know. It's been reported on S.O. before. We have a fix on the way (next release).
Meanwhile, inside your main module do two things:
1) define a bogus knockout module
define('ko', function() {}); // do nothing
2) add a shim to your require.config function:
...
shim: {
jquery: { exports: '$' },
angular: { exports: 'angular' },
breeze: { deps: ['ko', 'jquery', 'Q'] }
}
...
You'll need the shim (minus the 'ko' dependency!) even after we fix the ko problem. Breeze depends on 'jquery' and 'Q' which must be loaded first. You may or may not need the other shim lines.
Related
I'm using Typescript 1.7, AngularJS 1.5.7, oclazyload 1.0.9, ui-grid 3.2.5, ui-router 0.3.1, requirejs 2.2.0
First, everything was working fine until I upgraded from Angular 1.4.3 to 1.5.7
In my code I pull in source like so from the require config:
shim: {
'angular': {
exports: 'angular',
deps: ['Scripts/RequireJS/V.2.2.0/domReady!']
},
'ngSanitize': {
deps: ['angular']
},
'ngAnimate': {
deps: ['angular']
},
'ngTouch': {
deps: ['angular']
},
'uiRouter': {
deps: ['angular', 'ocLazyLoad']
},
'uiBootstrapTpls': {
deps: ['angular']
},
'ocLazyLoad': {
deps: ['angular', 'ngAnimate']
},
Once the require calls complete I config angular and then call bootstrap manually.
the user comes to a login page, logs in, then goes to the homepage. The homepage has a ui-grid, so we lazy load ( oc lazy loader ) on the state change like so:
$ocLazyLoad.load('uiGrid');
note uiGrid was configured in the angular module config call like this:
$ocLazyLoadProvider.config({
events: true,
jsLoader: requirejs,
serie: true,
modules: [
{
name: 'uiGrid',
files: ['Scripts/AngularUIGrid/V.3.2.5/ui-grid.min']
}
Now this all works just fine using Angular 1.5.7, but if I reload the page I get this:
TypeError: $$animateJs is not a function\n
at prepareAnimation (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:2152:14)\n
at initDriverFn (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:2136:16)\n
at invokeFirstDriver (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:3234:24)\n
at Array.triggerAnimationStart (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:3080:33)\n
at nextTick (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:423:15)\n
at scheduler (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:393:5)\n
at Array.<anonymous> (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:3102:9)\n
at Scope.$digest (http://myServer/Scripts/Angular/V.1.5.7/angular.js?bust=2016_6_12_12_24:17338:55)\n
at Scope.$apply (http://myServer/Scripts/Angular/V.1.5.7/angular.js?bust=2016_6_12_12_24:17553:24)\n
at done (http://myServer/Scripts/Angular/V.1.5.7/angular.js?bust=2016_6_12_12_24:11698:47)
This didn't happen with 1.4.3 Angular.
A cursory lookindicated to me that when this happens it is because in angular-animate.js the DI of $$animateJs is undefined...therefore the displayed error message
var $$AnimateJsDriverProvider = ['$$animationProvider', function($$animationProvider) {
$$animationProvider.drivers.push('$$animateJsDriver');
this.$get = ['$$animateJs', '$$AnimateRunner', function ($$animateJs, $$AnimateRunner) {
Is oclazyload the problem, I looked at it a little bit and didn't know if maybe the way it decorates bootstrap and module could contribute?
Thanks in advance for any help.
The ui.grid has dependencies on ngAnimate so you need to load it in before loading ui.grid.
resolve: helper.resolveFor('ngAnimate','ui.grid')
Hope this helps.
I'd like to know how to load Underscore and Backbone using RequireJS and be able to configure Underscore before it's passed to Backbone.
I've seen this popular question on StackOverflow about this similar topic, but I haven't been able to figure out how to get Underscore to be configured for both of the following situations:
Underscore is required by itself
Underscore is loaded by Backbone
So my question is the following:
How can I configure Underscore using RequireJS when required by itself, and when required with Backbone in a module?
Here's what I've tried:
Approach that should work, but DOESN'T:
My first idea (as suggested here) was to define a requireJS module named (e.g.) rawUnderscore which returns Underscore without any configuration. Then, create a new module named underscore which requires rawUnderscore and configures it before returning its value. This causes loading problems (couldn't load backbone)
Configure Require.js modules
// When you initially setup require.js, add a new module to configure underscore
// Make it a dependency of backbone, so it'll always be loaded whenever
// backbone is used.
require.config({
paths: {
'underscore': 'underscoreConfig',
'rawUnderscore': 'underscoreOriginal'
},
shim: {
underscore: {
deps: ['rawUnderscore', 'jquery'],
exports: '_'
},
backbone: {
deps: ['underscore'],
exports: 'Backbone'
},
jquery: {
exports: 'jQuery'
}
}
});
underscoreConfig.js
define(['rawUnderscore'], function (_) {
'use strict';
_.templateSettings =
{
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%cleanHtml([\s\S]+?)%>/g,
escape : /<%[=-]([\s\S]+?)%>/g
};
return _;
});
Approach that works - Edit Underscore and remove AMD ability:
This works if I remove the AMD lines from Underscore.js (ie force Underscore to not be AMD compliant). I'd prefer not to do this as I like to keep libraries as they are, to ease future maintenance.
Configure Require.js to use the underscore patch
require.config({
shim: {
underscore: {
deps: ['underscorePatch'],
exports: '_',
init: function(patchIt){
return patchIt(this._);
}
}
}
});
underscorePatch.js
define('underscorePatch', [], function(){
'use strict';
function patch(_){
_.templateSettings = {
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%cleanHtml([\s\S]+?)%>/g,
escape : /<%[=-]([\s\S]+?)%>/g
};
return _;
}
return patch;
});
Approach that works when loaded with Backbone:
This approach works, but only in the context of when Backbone being loaded as well. Not when Underscore is required by itself.
Configure Require.js modules
// When you initially setup require.js, add a new module to configure underscore
// Make it a dependency of backbone, so it'll always be loaded whenever
// backbone is used.
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscoreConfig', 'underscore', 'jquery'],
exports: 'Backbone'
},
jquery: {
exports: 'jQuery'
}
}
});
underscoreConfig.js
define(['underscore'], function (_) {
'use strict';
_.templateSettings =
{
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%cleanHtml([\s\S]+?)%>/g,
escape : /<%[=-]([\s\S]+?)%>/g
};
return _;
});
I think your first example was on the right track. The following seems to work:
main.js
requirejs.config({
paths: {
'underscore': 'underscoreConfig',
'originalUnderscore': 'underscore'
},
shim: {
'originalUnderscore': {
exports: '_'
}
}
});
underscoreConfig.js
define(['originalUnderscore'], function(_) {
_.templateSettings =
{
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%cleanHtml([\s\S]+?)%>/g,
escape : /<%[=-]([\s\S]+?)%>/g
};
return _;
});
I am trying to integrate requirejs into an existing project, which runs on a node/grunt stack. I want to use the r.js optimizer to concat everything together and noodle through dependencies to do its magic as well.
I am able to get r.js to build a single .js file, and there are no errors... but nothing happens. I set breakpoints in my code, but nothing is getting kicked off - the app never actually runs the bootstrap.js file. I have tried putting the bootstrap.js in an immediate function, and of course it does run then, but the dependencies are not loaded yet (it seems). What am I missing here?
File structure:
app
-> modules
- -> common
- - -> auth.js // contains an auth call that needs to return before I bootstrap angular
-> app.js
-> index.html
config
-> main.js
node_modules
vendor
-> angular/jquery/require/domready/etc
gruntfile.js
gruntfile requirejs task:
requirejs: {
compile: {
options: {
name: 'app',
out: 'build/js/app.js',
baseUrl: 'app',
mainConfigFile: 'config/main.js',
optimize: "none"
}
}
},
main.js config:
require.config({
paths: {
'bootstrap': '../app/bootstrap',
'domReady': '../vendor/requirejs-domready/domReady',
'angular': '../vendor/angular/angular',
'jquery': '../vendor/jquery/jquery.min',
'app': 'app',
'auth': '../app/modules/common/auth',
requireLib: '../vendor/requirejs/require'
},
include: ['domReady', 'requireLib'],
shim: {
'angular': {
exports: 'angular'
}
},
// kick start application
deps: ['bootstrap']
});
app.js:
define([
'angular',
'jquery',
], function (angular, $) {
'use strict';
$( "#container" ).css("visibility","visible");
return angular.module('app');
});
bootstrap.js:
define([
'require',
'angular',
'app',
'jquery',
'auth'
], function (require, angular, app, $, auth) {
var Authentication = auth.getInstance();
.. do auth stuff...
if (Authentication.isAuthorized) {
require(['domReady!'], function (document) {
angular.bootstrap(document, ['app']);
});
}
);
You need to set up a main point of entry into your application; here it would be app.js, but all you are doing in that file is defining that files dependencies and not actually loading any code. You need to change your code to this:
require([
'angular',
'jquery',
], function (angular, $) {
'use strict';
$( "#container" ).css("visibility","visible");
return angular.module('app');
});
See this thread for more details on the difference between define and require.
I am trying to use require.js with Main.js and getting following error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=MyApp&p1=Error%3…3A8080%2FResults%2Fresources%2Fjs%2Fvendor%2Fangular.min.js%3A31%3A252)
My Main.js
require.config({
// alias libraries paths
paths: {
'angular': 'vendor/angular.min',
'jquery': 'vendor/jquery-1.8.0-min',
'angularroute': 'vendor/angular-route'
},
// angular does not support AMD out of the box, put it in a shim
shim: {
'angular': {
deps: ['jquery'],
exports: 'angular'
},
'angularroute':{
deps:['angular']
}
}
});
require([
'angular',
'angularroute',
'app'
],
function(angular, angularroute, app){
'use strict';
})
My app.js
define(['angular'], function(angular){
return angular.module('MyApp',['ngRoute']);
});
I got an error that said I need to add angularroute to my app but I still get this error. Can anyone point me to what i might be doing wrong?
I found a solution here: https://github.com/tnajdek/angular-requirejs-seed/blob/master/app/js/main.js
from the docs:
http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = "NG_DEFER_BOOTSTRAP!";
require(['angular', 'angularroute', 'app'], function(angular, angularroute, app){
'use strict';
//after you are done defining / augmenting 'MyApp' run this:
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
})
Here is my require config, at require_config.js:
var require = {
baseUrl: '/js',
paths: {
'angular': 'lib/angular.min',
'angular.route': 'lib/angular-route.min',
'angular.resource': 'lib/angular-resource.min',
'angular.animate': 'lib/angular-animate.min',
'angular.ui.bootstrap': 'lib/ui-bootstrap-tpls-0.6.0.min',
'angular.upload': 'lib/ng-upload.min',
'jquery': 'lib/jquery-1.10.2.min'
},
shim: {
'angular': ['jquery'],
'angular.route': ['angular'],
'angular.resource': ['angular'],
'angular.animate': ['angular'],
'angular.ui.bootstrap': ['angular'],
'angular.upload': ['angular'],
'my.angular': ['angular', 'angular.route', 'angular.resource', 'angular.animate', 'angular.ui.bootstrap', 'angular.upload']
}
};
My script tags at HTML <head>:
<script src="/js/require-config.js"></script>
<script src="/js/lib/require.js"></script>
The pages that come from server-side MAY make usage of Angular, or jQuery, both, or none... so, the HTML markup may contain a single simple tag to eventually activate the whole Angular structure, like this:
<script>require(['myApp']);</script>
Now, at myApp.js, I just depend on my.angular, which takes care of loading everything else... in fact, I have other flavours of "my.angular", with different subsets, which I use in different contexts of the site:
define(['my.angular'], function() {
var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngAnimate', 'ngUpload', 'ui.bootstrap']);
// more app module stuff here, including bootstrap
return myApp;
});
angular is defined as a global variable and your declaration is overriding it. The file angular.js does not return anything so there is nothing to inject at the RequireJS level. Try the following:
define(['angular'], function(){
return angular.module('MyApp',['ngRoute']);
});
I was struggling with RequireJS and AngularJS so I created angularAMD to help me:
http://marcoslin.github.io/angularAMD/
Your setup looks fine, except you need to add angularroute as a dependency in the define portion of the app.js file. You mentioned this, but didn't reflect this in your sample code.
define(['angular', 'angularroute'], function(angular){
return angular.module('MyApp',['ngRoute']);
});
I have a Backbone app that gets errors of Backbone is not defined non-deterministically from different spots in my code that use Backbone. Sometimes it loads first and the site loads, other times it doesn't. I'm using the following as my main.js:
require.config({
paths: {
jqueryui: 'libs/jquery/jquery-ui',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-min',
text: 'libs/require/text',
order: 'libs/require/order',
searchcollector: 'libs/jquery/searchcollector.plugin',
guiders: 'libs/jquery/guiders'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore'],
exports: 'Backbone'
}
}
});
require([
'views/app',
'helpers'
], function(app) {
var app = window.app = new app();
});
I'm using
<script data-main="/assets/js/main" src="/assets/js/libs/require/require-jquery.js"></script>
in my HTML so jQuery is loaded with the require. I took this advice from this (http://stackoverflow.com/questions/8131265/loading-backbone-and-underscore-using-requirejs) SO thread, but nothing seems to be working. Shouldn't the Shim be loading the Backbone first and then making it globally available? Any help appreciated.
Not sure if this is the correct answer but I've noticed that you don't list jquery as a Backbone dependency. While Backbone lists Underscore as the only hard dependency, Backbone.View will need jquery or zepto to work.
But why then, does it seem to work some of the time?
It might be that since jQuery is an AMD module, when you load, it sometimes loads first, and other times it doesn't. When it loads before Backbone, it is available and Backbone is happy. Otherwise, perhaps, the bad results you are getting.
Try something like this:
In your path add this:
jquery: 'libs/require/require-jquery'
And in your shim, add this:
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
Let me know what you get as a result. I've never used the shim feature of requirejs2.0 so I'm curious whether I'm understanding the deeper stuff correctly.
In my opinion it's a little bit hacky to load require and jquery in the same file.
And set jquery as a deps for Backbone is false because Underscore need jquery, and it's loaded before Backbone so the correct way is like this
require.config({
paths: {
'jquery': 'path to jquery'
,'underscore': 'path to underscore'
,'backbone': 'path to backbone'
**other paths...**
}
,shim: {
jquery: {
exports: '$'
}
,'underscore': {
deps: [ 'jquery' ]
,exports: '_'
}
,'backbone': {
deps: [ 'underscore' ]
,exports: 'Backbone'
}
}
});
Finally your tag script will be
<script data-main="/assets/js/main" src="/assets/js/libs/require.js">
</script>
Then you just have to call lib you need like this
define( [ 'jquery', 'underscore', 'backbone' ],
function( $, _, Backbone )
{
// stuff
} );
And for a model you maybe don't need jquery and underscore so just calling Backbone will work
define( [ 'backbone' ],
function( Backbone )
{
// Backbone.extend ?
} );