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

nabin · Accepted Answer · 2016-03-01 09:58:19Z

1

How about lazy loading this way.

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

answered Mar 1, 2016 at 9:58

nabin

6874 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

magneto Over a year ago

Thanks for the tip, unfortunately my directive is still not loaded.

nabin Over a year ago

since you app module and directive module name is different, isn't it necessary to inject your directive module name to main module

Ashley Kurkowski · Accepted Answer · 2016-03-01 09:50:30Z

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 1, 2016 at 9:50

Ashley Kurkowski

2061 silver badge5 bronze badges

3 Comments

magneto Over a year ago

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.

Ashley Kurkowski Over a year ago

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. github.com/johnpapa/angular-styleguide/blob/master/a1/… Another alternative is to keep them in the same module, so you would change this "angular.module('app.demo', [])" to "angular.module('app') "

magneto Over a year ago

thanks, I didn't see this. I updated my code with "angular.module('app') " but still no luck.

Collectives™ on Stack Overflow

Lazy loading angular app doesn't load a directive

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related