Cant get angular component router to work with lazyloading of components

Question

Hello fellow stackoverflowers, I've been trying for some time now without success to implement lazy loading of angular components with the new component router (ngComponentRouter). This is the code I used for the configuration of the main component:

//define main app component 
    app.value("$routerRootComponent","simpleTrackerApp");
//main app component config
    
    var lazyLoaderMod = null;
    var httpService = null;
    
    app.component("simpleTrackerApp", {
        /*@ngInject*/
        controller:function ($ocLazyLoad,$http) {
            lazyLoaderMod = $ocLazyLoad;
            httpService = $http;

        },
        templateUrl: CONFIG_APP_SHARED_URL + 'mainComponent/simpleTrackerApp.html',
        $routeConfig: [
            { 
                useAsDefault:true,
                path:"/bugs", 
                name:"Bugs",
                loader: function () {
                    return lazyLoaderMod.load(CONFIG_APP_COMPONENTS_URL + 'bug/bugs/bugsCtrl.js');
                }
            },
            {path:'/**',redirectTo:['Bugs']}
        ]
    });

My first problem was I could'nt get it to work with ocLazyLoad injected in loader propety so I loaded it in the main controller and referenced it in the loader property. After that when I finally got it working inside loader propety I couldn't seem to get it to actually load the component I kept getting this error:

lib.js:2 TypeError: Cannot read property 'then' of undefined
    at e._loader (http://simpletracker.co.il/client/production/app/lib.js:9:10670)
    at e.resolveComponentType (http://simpletracker.co.il/client/production/app/lib.js:9:21463)
    at e.recognize (http://simpletracker.co.il/client/production/app/lib.js:9:23535)
    at http://simpletracker.co.il/client/production/app/lib.js:9:25949
    at Array.forEach (native)
    at e.recognize (http://simpletracker.co.il/client/production/app/lib.js:9:25921)
    at e._recognize (http://simpletracker.co.il/client/production/app/lib.js:10:4834)
    at e.recognize (http://simpletracker.co.il/client/production/app/lib.js:10:4605)
    at t.e.recognize (http://simpletracker.co.il/client/production/app/lib.js:10:13656)
    at http://simpletracker.co.il/client/production/app/lib.js:10:10757

Now I understand I'm obviously doing something wrong in the loader and that I need to somehow register the component. but I couldn't find any docs on angular for the loader and nobody else lazyloading components with the new router so I really couldn't figure how this could be achieved.

I'd really appreciate some help on this but I'm also wondering in general if maybe it is premature to use angular component router with its lack of documentation and support. So I'd really like to hear from other expierenced angular programmers their opinion on the matter.

Edit:Anyone have any insight on the matter?..

Answer 1

You could use $router instead of the http-service. Applied on your code:

app.component("simpleTrackerApp", {

templateUrl: 'mainComponent/simpleTrackerApp.html',

controller: ['$router', '$ocLazyLoad', function ($ocLazyLoad, $http) {

    $router.config([
        {
            path: '/bugs/',
            name: "Bugs",
            loader: function () {
                return $ocLazyLoad.load('/bugsFolder/bugs.component.js') //no url, set the path to your component 
                    .then(function () {
                        return 'bugs' //name of your component
                    })
                }
            }

        ])

    }],

});

And don't forget to inject your dependencies in the app.module.