Loading Angular components

[aderito7]

I'm sorry if this is not an issue here, but with Angular.

I load a component in the form of a .js file. Within it is a list of additional components that need to be loaded to be rendered to that parent component. However on the initial load, the child components do not render, only once I move away from that route and then back again does it render. I provide an example:

$router.config([
{
  path: 'employee',
  name: 'employee',
  loader: function () {
    return $ocLazyLoad.load('employee.js')
      .then(function ()
        return 'employee';
      )
  }
}
]);
(function(){
  components = ['employeef'];
  app.component('employee', {
    template: '<employeef></employeef>'
    components: components,
    controller: ['$ocLazyLoad', function ($ocLazyLoad) {
      //get components (['employeef']) with $ocLazyLoad
    }]
    //..
  })
}())

[ocombe]

Is the employee component the file that you lazy load ?

Are you using the component router? I've never used it with angular 1, is there some documentation somewhere now?

[aderito7]

My apologies again, seems that I should rather have looked at angular as the perpetrator

I missed this part. The angularjs.org site provides sufficient documentation, I guess, it's just a matter of putting two and two sometimes, which I'm not so good, but I got help from another fellow gitter.im member @brandonroberts

The solution

(function() {
    var employee = angular.module('user', []); 
    employee.component('employee', {
        selector: 'employee',
        templateUrl: './src/grid/employee/123.html',
        component: ['employeef'],
        $canActivate: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load('./src/form/employeef/123.js').then(function() {
                return true;
            });
        }]
    });
})();

[ocombe]

Good to know, I'm sure this can help people who will use the component router, thanks for providing the solution.