Routed components + lazy modules (ocLazyLoad) ng1

[alo]

Hi!

I'm trying to use ui.router(@Version v1.0.0-beta.3) with component routed and oc.lazyLoad(@Version v1.0.9)

This is working

angular.module('app').config(
    ['$stateProvider',
    function ($stateProvider) {

      $stateProvider
        .state('app.sessions', {
          url: '/sessions', 
          template: '<sessions-comp></sessions-comp>', //this is the difference 
          resolve: {
            store: function ($ocLazyLoad) {
              return $ocLazyLoad.load(
                {
                  name: "sessions",
                  files: ["app/dev/sessions/sessions.js",
                    "app/dev/sessions/sessions/sessions.component.js",
                    "app/dev/sessions/shared/sessions.service.js",
                    "app/dev/sessions/shared/sessions-list/sessions-list.component.js"]
                }
              );
            }
          }
        });
      }
    ]
    );

This is NOT working

angular.module('app').config(
    ['$stateProvider',
    function ($stateProvider) {

      $stateProvider
        .state('app.sessions', {
          url: '/sessions', 
          component: 'sessionsComp', //this is the difference 
          resolve: {
            store: function ($ocLazyLoad) {
              return $ocLazyLoad.load(
                {
                  name: "sessions",
                  files: ["app/dev/sessions/sessions.js",
                    "app/dev/sessions/sessions/sessions.component.js",
                    "app/dev/sessions/shared/sessions.service.js",
                    "app/dev/sessions/shared/sessions-list/sessions-list.component.js"]
                }
              );
            }
          }
        });
      }
    ]
    );

I've ask to the ocLazyLoad group Link

Repo to test

Thanks!

[christopherthielen]

Very interesting. I'll take a look.

For now I'll link to this plunker which has a lazy load component hook: http://plnkr.co/edit/3kvrVY?p=preview

[christopherthielen]

OK, I see how this happens now.

The template builder (which is how route-to-component works) requires that the component is available, in order to wire up inputs, etc.

• The template builder is invoked from an onStart hook via view.load().
• Resolves are fetched in an onEnter hook.
• onStart happens earlier than onEnter

You have two options:

• Use a transition hook to lazy load code (like the plunker). You can control when the lazy loading occurs. Transition hooks are a better fit for things like lazy loading. In general, use resolve only when you are loading data for a view.
• Mark your resolve as "EAGER" using a resolve policy. (EAGER resolves are fetched as an onStart hook)

angular.module('myApp', ['ui.router', 'oc.lazyLoad'])
  .config(
  ['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider ) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('app', {
        url: '/', 
        component: 'appComp',
        resolvePolicy: { deps: { when: "EAGER" } }, // LOAD `deps` RESOLVE EAGERLY
        resolve: {
          deps: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load(
              {
                name: "lazyModule",
                files: ["./lazy-module.js"]
              }
            );
          }]
        }
      });
    }
  ]
);

[alo]

Thanks so much for the explanation!