Lazy loading angular app doesn't load a directive

Question

I'm trying to lazy load a directive in my angular app, using ui.router and oc.lazyLoad. Here is my code :

menu :

<ul>
      <li><a ui-sref="home">Home</a></li>
      <li><a ui-sref="demo">Demo</a></li>
      <li><a ui-sref="test">Test</a></li>
    </ul>
    <ui-view></ui-view>

route config :

angular.module('app', ['ui.router', 'oc.lazyLoad'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state("demo", {
            url:'/demo',
            views: {
              'lazyLoadView' : {
                template: '<demo-directive></demo-directive>'
              }
            },
            resolve : {
              loadDemoModule : ['$ocLazyLoad', function($ocLazyLoad) {
                console.log('resolving demo lazy load');
                return $ocLazyLoad.load('demo.js');
              }]
            }
          })
          .state("home", {
            templateUrl : 'core/home.html',
            url : '/home'
          })
}])

and the directive :

angular.module('app').
directive('demoDirective', function() {

  return {
    restrict: 'E',
    scope: {},
    template: require('./demo-directive.html'),
    // templateUrl: 'demo-directive.html', 
    controllerAs: 'demo',
    controller : ['$timeout', function($timeout) {
      console.log('in directive controller');
    }]
  };

});

I have no errors, the console.log in resolve function is displayed, the demo.js file is loaded but then noting is happening, console form directive controller is not displayed. I'm trying to follow the first example from ocLazyLoad example

Thanks

score 1 · Answer 1 · answered Mar 01 '16 at 09:58

1

How about lazy loading this way.

return $ocLazyLoad.load({
                        name: 'app.demo',
                        files: ['path/to/demo.js']
                    })

answered Mar 01 '16 at 09:58

nabin

687
4
13

Thanks for the tip, unfortunately my directive is still not loaded. – magneto Mar 01 '16 at 10:10
since you app module and directive module name is different, isn't it necessary to inject your directive module name to main module – nabin Mar 01 '16 at 10:15

score 0 · Answer 2 · answered Mar 01 '16 at 09:50

0

You have not declared the oc.lazyLoad module as a dependency.

angular.module('app.demo', ["oc.lazyLoad"])

See the quickstart - https://oclazyload.readme.io/docs/

You're also not closing your demo directive

 template: '<demo-directive></demo-directive>'

answered Mar 01 '16 at 09:50

Ashley Kurkowski

206
1
5

I updated my code, my route config is attached to another module which includes the oclazyload dependency. I updated my post. I also added closing tag for directive, but still the same problem. – magneto Mar 01 '16 at 10:05
You're declaring two seperate modules. App and App.Demo, you need to connect them, add app.demo as a dependency for app. Just as an example, have a look at the modules section of this style guide by jon papa. https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modules Another alternative is to keep them in the same module, so you would change this "angular.module('app.demo', [])" to "angular.module('app') " – Ashley Kurkowski Mar 01 '16 at 10:45
thanks, I didn't see this. I updated my code with "angular.module('app') " but still no luck. – magneto Mar 01 '16 at 12:46

Lazy loading angular app doesn't load a directive

2 Answers2