ocombe / ocLazyLoad

Lazy load modules & components in AngularJS
https://oclazyload.readme.io
MIT License
2.63k stars 510 forks source link

angular 1.5: oclazyload in components #312

Open Meistercoach83 opened 8 years ago

Meistercoach83 commented 8 years ago

I´m trying to load all my submodules with oclazyload. I added this config-Block to my app-Component:

appComponent.$inject = ['$rootRouter', '$ocLazyLoad', 'settingsService'];

function app() {
    return {
      template: '<page-header></page-header>\n' +      
        '<ng-outlet></ng-outlet>\n' +       
        '<page-footer></page-footer><nav>',
      controller: appComponent
    };
  }

 function appComponent($router, $ocLazyLoad, settingsService) {
    // needed for configured subPaths
    var pageSettings = settingsService.getPageSettings();

    $router.config([
      {
        path: '/article/...',
        name: 'Article',
        useAsDefault: true,
        loader: function () {
          return $ocLazyLoad.load({
            name: 'app',
            insertBefore: '#ng_load_plugins_before',
            files: [
              'client/services/article-api/article-api.service.js',
              'client/components/article/article.component.js',           
            ]
          }).then(function () {
            return 'article';
          });
        }
      }
     ]);

Till here, everyting works fine - the dashboards-Component is loaded. Now I´d like to do the same in that component. when the the routes are loaded, they should load their needed files, too. I tried it this way:

articleComponent.$inject = ['$rootRouter', '$ocLazyLoad', 'settingsService'];

  function article() {
    return {
      templateUrl: 'components/article/article.component.html',
      controller: articleComponent
    };
  }

  function articleComponent($router, $ocLazyLoad, settingsService) {

    //var pageSettings = settingsService.getPageSettings();

    $router.config([
      {
        path: '/',
        name: 'ArticleList',
        useAsDefault: true,
        loader: function () {
          return $ocLazyLoad.load({
            name: 'app',
            insertBefore: '#ng_load_plugins_before',
            files: [
              'client/components/article/articleList/articleList.component.js'
            ]
          }).then(function () {
            return 'articleList';
          });
        }
      },
      {
        path: '/article/:id',
        name: 'ArticleDetail',
        useAsDefault: true,
        loader: function () {
          return $ocLazyLoad.load({
            name: 'app',
            insertBefore: '#ng_load_plugins_before',
            files: [
              'client/components/article/articleDetail/articleDetail.component.js'
            ]
          }).then(function () {
            return 'articleDetail';
          });
        }
      }
    ]);
}

But now, I´m getting an "Component "Root" has no route config." - can you tell my why? or could you help me to get it working