ocLazyLoad
ocLazyLoad copied to clipboard
[Error: $$animateJs is not a function] Reloading ng module
Hey, I've decided to try and integrate ocLazyLoad in my project. Integration was smooth until the mysterious error:
$$animateJs is not a function
Few minutes of searching and I've found https://github.com/angular/angular.js/issues/14291
Managed to debug it a little further, it probably has something to do w/ ocLazyLoad. ngModule() is called twice, once after angular-animate is bootstrapped, overriding the latter's animation providers. Going to close it.
Few minutes later I got it!
https://github.com/brandly/angular-youtube-embed/blob/v1.2.0/dist/angular-youtube-embed.min.js#L5
angular.module("youtube-embed",["ng"])
In my case the root of the problem was 'ng'
defined as dependency in external module.
Should ocLazyLoad exclude ng
from the dependencies list? If yes, I could try and refactor part of the code and add PR. What is the proper behaviour in that case?
Demo: http://www.webpackbin.com/Vk0u5a7Hb
To fix this, we can:
- remove "ng" from the deps list
- force ocLazyLoad to exclude "ng" from the deps list?
I was having the same problem when using ocLazyLoad
along with ionic Framework
. I included like this on my config.router.js
file.So on my deps
block I included the $$animateJs
. I found the this little hack from this EDIT 2 STACKOVERFLOW
answer
I was getting this error when I try to load ngResource
.
.state('auth.signup', {
url: '/signup',
templateUrl: "views/auth/signup.html",
resolve : {
deps : ['$$animateJs','$ocLazyLoad',
function ($$animateJs, $ocLazyLoad) {
return $ocLazyLoad.load('ngResource')
.then( function () {
return $ocLazyLoad.load([
'./js/services/apiCalls.js',
'./js/controllers/signupCtrl.js',
'./js/directives/tabs.js'
])
});
}
]
}
})
+1
This is a slightly modified version of the above, thought i'd share (no need for the second promise for me) This is for the same error, but when hard refreshing the page and loading ui.grid
.state('app.myroute', {
url: '/my-route',
title: 'My Route',
controller: 'MyRouteController',
controllerAs: 'myRoute',
templateUrl: helper.basepath('my-route.html'),
resolve : {
ngAnimate : ['$$animateJs','$ocLazyLoad', function ($$animateJs, $ocLazyLoad) {
return $ocLazyLoad.load([
'vendor/angular-ui-grid/ui-grid.min.css',
'vendor/angular-ui-grid/ui-grid.min.js'
])
}]
}
})
+1
@ocombe Any good reasons why we can't remove 'ng'
from the deps list?
ng dependencies are official modules (ng animate, ng cookies, ...). The Angular team cheats with modules and has access to internal angular stuff that regular libs don't. When you register ng animate for example, it actives stuff in the core angular. Which means that you cannot lazy load such packages, it will not work (or it will half work and generate bugs) because they need to be activated before bootstrap. That's why "ng" is already in the deps list by default.
Thanks for the clarification.
I have, however, forked the repo, removed 'ng'
, and am no longer running into the $$animateJs is not a function
error described above.
Up until now, it does not seem to create any kind of other bugs.
I'm on angular 1.5 with the component router and there doing things like this:
this.$rootRouter.config = ([
{
path: '/archive',
name: 'Archive',
loader: () => {
let deferred = this.$q.defer();
require.ensure([], () => {
const module = require('./views/archive')
return this.$ocLazyLoad.inject({name: module.default})
.then(() => deferred.resolve('archiveCmp') )
});
return deferred.promise
}
},
])
this was a problem when I created the lib a while ago, but I haven't tested this without the ng dependency in 1.5+ that's for sure, maybe they fixed the issue somehow
+1