Component Router Lazy Loading

app-lazyload.js

(function() {
  var app = angular.module('myApp', ['oc.lazyLoad', 'ngComponentRouter']);
  
  app.component('app', {
    template: [
      '<a ng-link="[\'Home\']">Home</a> |',
      '<a ng-link="[\'About\']">About</a> |',
      '<a ng-link="[\'User\', \'Profile\']">User Profile</a>',
      '<hr>',
      '<ng-outlet></ng-outlet>'
    ].join('\n'),
    controller: ['$router', '$ocLazyLoad', function($router, $ocLazyLoad) {
      $router.config([
        { path: '/', name: 'Home', component: 'home' },
        { path: '/about', name: 'About', component: 'about' },
        { 
          path: '/user/...',
          name: 'User',
          loader: function() {
            // lazy load the user module
            return $ocLazyLoad.load('user.js')
                  .then(function() {
                    // return the user component name
                    return 'user';
                  });
          }
        }
      ]);
    }]
  });
  
  app.component('home', {
    template: 'Welcome Home'
  });
  
  app.component('about', {
    template: 'About Me'
  });
})();