Не могу заставить угловой компонентный маршрутизатор работать с ленивой загрузкой компонентов

Question

Здравствуйте, стекировщики, я уже некоторое время безуспешно пытаюсь реализовать отложенную загрузку угловых компонентов с помощью нового маршрутизатора компонентов (ngComponentRouter). Это код, который я использовал для настройки основного компонента:

//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']}
        ]
    });

Моя первая проблема была в том, что я не мог заставить его работать с ocLazyLoad, внедренным в загрузчике, поэтому я загрузил его в основной контроллер и сослался на него в свойстве загрузчика. После этого, когда я наконец-то заработал, работая с proty загрузчика, я не смог заставить его загружать компонент, я продолжал получать эту ошибку:

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

Теперь я понимаю, что я явно делаю что-то не так в загрузчике и что мне нужно как-то зарегистрировать компонент. но я не смог найти никаких документов на angular для загрузчика, и никто больше не ленился загружать компоненты с новым маршрутизатором, поэтому я действительно не мог понять, как этого можно достичь.

Я был бы очень признателен за помощь в этом, но мне также интересно, если, возможно, преждевременно использовать угловой компонентный маршрутизатор из-за отсутствия документации и поддержки. Так что я бы очень хотел услышать от других опытных программистов на английском языке их мнение по этому вопросу.

Изменить: Кто-нибудь есть понимание по этому вопросу?..

Answer 1

Вы могли бы использовать $router вместо http-сервиса. Применяется к вашему коду:

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
                    })
                }
            }

        ])

    }],

});

И не забудьте ввести свои зависимости в app.module.