ocLazyLoad icon indicating copy to clipboard operation
ocLazyLoad copied to clipboard

[Error: $$animateJs is not a function] Reloading ng module

Open hinok opened this issue 8 years ago • 8 comments

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?

hinok avatar Jun 20 '16 14:06 hinok

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'
      ])
    });
   }
  ]
 }
})

acedesigns avatar Jul 20 '16 18:07 acedesigns

+1

cipchk avatar Aug 08 '16 07:08 cipchk

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'
                    ])
                }]
            }
        })

j-r-t avatar Sep 30 '16 16:09 j-r-t

+1 @ocombe Any good reasons why we can't remove 'ng' from the deps list?

creimers avatar Dec 20 '16 09:12 creimers

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.

ocombe avatar Dec 20 '16 09:12 ocombe

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
      }
    },
])

creimers avatar Dec 20 '16 09:12 creimers

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

ocombe avatar Dec 20 '16 09:12 ocombe

+1

sampathg9 avatar May 24 '17 13:05 sampathg9