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.
Related
I would like to add some plugin to my project based on angular + requirejs.
In my config I do:
shim: {
'angular': {exports: 'angular', deps: ['jquery']},
'angular-strap': {deps: ['angular']},
}
But when I write in my module:
define([
'angular',
'angular-strap'
]
Then I get console error "Uncaught ReferenceError: angular is not defined" in line where angular-strap module is registering
angular.module('mgcrea.ngStrap', [
If I remove angular-strap from define application is loaded properly and in global context I can see 'angular' object.
You have inject angular-strap wrongly. You are supposed to use this syntax instead
angular.module('your_app name', ['deps']);
in your case it will be like this
angular.module('yourApp', ['mgcrea.ngStrap']);
Did anyone successfully loaded moment.js in a r.js build (with almond) ?
I am using backgrid and backgridMomentCell: everything's works perfectly before I build my main.min.js file. After build time moment is not defined and thus can't be found by backgridMomentCell extension.
I've tried several option (even shim) without success.
If somedoby has a require.config that work can he/she shares it ?
EDIT (sorry for not answering any sooner, launch time kept me away from SO):
In the build file BackGridMomentCell keep throwing "moment is not defined" errors.
My code as requested in the comment
requirejs.config({
paths: {
backbone: 'vendor/backbone-1.1.0',
backbonePageable: 'vendor/backbone-pageable-1.4.1',
backgrid: 'vendor/backgrid/js/backgrid-0.2.6',
backgridPaginator: 'vendor/backgrid/js/extensions/paginator/backgrid-paginator',
backgridMomentCell: 'vendor/backgrid/js/extensions/moment-cell/backgrid-moment-cell',
bootstrap: 'vendor/bootstrap/js/bootstrap-3.0.1',
bootstrapDatepicker: 'vendor/bootstrap-datepicker/bootstrap-datepicker-fda46bb',
codemirror: 'vendor/codemirror/js/codemirror-3.20',
codemirrorMarkdown: 'vendor/codemirror/mode/markdown/markdown',
jsDiff: 'vendor/diff-1.0.7',
fullCalendar: 'vendor/fullcalendar/fullcalendar-1.6.4',
fullCalendarJqueryUiCustom: 'vendor/fullcalendar/jquery-ui-1.10.3.custom.min',
jquery: 'vendor/jquery-1.10.2',
marked: 'vendor/marked-0.2.10',
select2: 'vendor/select2/select2-3.4.5',
speakingurl: 'vendor/speakingurl-0.4.0',
underscore: 'vendor/underscore-1.5.2',
moment: 'vendor/moment.with.langs'
},
shim: {
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
backgrid: {
deps: ['jquery', 'backbone', 'underscore'],
exports: 'Backgrid'
},
backgridPaginator: {
deps: ['backgrid']
},
backgridMomentCell: {
deps: ['backgrid','moment']
},
bootstrap: {
deps: ['jquery']
},
bootstrapDatepicker: {
deps: ['jquery']
},
codemirror: {
exports: 'CodeMirror'
},
codemirrorMarkdown: {
deps: ['codemirror'],
exports: 'codemirrorMarkdown'
},
fullCalendar: {
deps: ['jquery', 'fullCalendarJqueryUiCustom']
},
fullCalendarJqueryUiCustom: {
deps: ['jquery']
},
select2: {
deps: ['jquery']
},
underscore: {
exports: '_'
}
}
});
The head of my module
define([
'jquery',
'fullCalendar',
'underscore',
'backgrid',
'backgridPaginator',
'moment',
'backgridMomentCell',
'backbone',
'collections/ItemPaginatedCollection',
'utils/BackgridCustomUriCell'
], function ($, _fullCalendar, _, Backgrid, _backgridPaginator, moment, MomentCell,Backbone, ItemPaginatedCollection, BackgridCustomUriCell) {
"use strict";
....
EDIT 3 :
Loading moment.js before my compiled main.js works but is not optimal IMHO.
The easiest two methods I have found:
1) Wrap backgrid-moment-cell.js in the CommonJS wrapper code specified in the RequireJS API. You can do this dynamically during the build process using the conversion tool mentioned in the API.
2) Require moment-cell inline and set findNestedDependencies to false in your build.js.
The issue is that the moment-cell code passes in this to itself when it is initialized, and looks for either "exports.moment" or "this.moment."
On a related note, including moment in the shim for moment-cell is unnecessary, and technically you should include underscore. From the API:
Only use other "shim" modules as dependencies for shimmed scripts, or
AMD libraries that have no dependencies and call define() after they
also create a global (like jQuery or lodash). Otherwise, if you use an
AMD module as a dependency for a shim config module, after a build,
that AMD module may not be evaluated until after the shimmed code in
the build executes, and an error will occur. The ultimate fix is to
upgrade all the shimmed code to have optional AMD define() calls.
Moment is actually an AMD module.
Most likely your problem is that you didn't specify findNestedDependencies true in your build file.
Take a look at this commit (from my book on RquireJS and Backbone.Marionette): https://github.com/davidsulc/structuring-backbone-with-requirejs-and-marionette/commit/85d3d3dd40d0cebd858224c3903a12d6998d668d
I think it's to do with moment's global object being deprecated.
2.4.0 - Deprecate globally exported moment, will be removed in next major
https://github.com/moment/moment
Moment needs to be defined in the specific module now.
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']);
});
My main.js look as below
requirejs.config({
//By default load any module IDs from ../js
baseUrl: '../js',
paths : {
'jquery': 'libs/jquery',
'underscore': 'libs/underscore',
'backbone': 'libs/backbone',
'bootstrap': 'libs/bootstrap'
},
shim: {
'jquery': {
exports: '$'
},
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['jquery', 'underscore'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'bootstrap': {
deps: ['jquery'],
exports: 'Bootstrap'
}
}
});
define(
['jquery', 'backbone','underscore', 'bootstrap'],
function (j, b, u, boot) {
console.log('jquery', j);
console.log('backbone', b);
console.log('underscore',u);
console.log('bootstrap', boot);
}
);
And my console image is like this:
When I click on X sign in alert, they disappear. So, I think bootstrap.js is loaded correctly. However, it says undefined in console. Can anyone make me clear is the bootstrap.js is loaded correctly and safe to use? And why it is saying undefined while rest of are defined well in console.
As jquery, backbone, and underscore export global variables to be used elsewhere, while bootstrap will just take the existing jquery object and will add plugins to the object, hence it won't export anything.
So, if you try to receive it in define callback, ideally it will be undefined. If you've used any bootstrap component on the page and if it is working it means bootstrap is integrated.
From the requirejs shim docs
For "modules" that are just jQuery or Backbone plugins that do not need to export any module value, the shim config can just be an array of dependencies:
requirejs.config({
shim: {
'bootstrap': ['jquery']
}
});
So, if you want, you can declare bootstrap like its specified in the docs.
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.