Ленивая загрузка угловых директив в ui-router как куски Webpack

Я пытаюсь лениво загрузить угловую директиву как кусок веб-пакета.

Вот моя текущая попытка настройки при использовании ocLazyLoad:

// Basic Config
function routingBase( $urlRouterProvider, $locationProvider, $stateProvider ) { 

    $locationProvider.html5Mode(true);

    $stateProvider
        .state('home', {
            url: '/home',
            template: '<app-main></app-main>',
            resolve: {
                load: ( $q, $ocLazyLoad ) => {

                    let deferred = $q.defer(); 

                    require.ensure([], (require) => {

                        // Load entire module
                        let module = require('../modules/main');

                        $ocLazyLoad.load({ 
                            name: module.name 
                        });

                        deferred.resolve(module);

                    }, 'app-main');

                    return deferred.promise;
                }
            }
        })
}

Это относится к myModule.config(routingBase); ,

../modules/main - это просто угловой модуль, который экспортирует директиву (например, export default angular.module('main',[]).directive('appMain', appMainFn);

Какие-нибудь советы? Я получаю, что <app-main></app-main> правильно добавлен в документ и что кусок правильно загружен как модуль. Но он не заменяется (он остается как <app-main></app-main>).

Вы порекомендовали бы другой метод для ленивых загрузочных кусков (возможно, используя $compileProvider)? Я хотел бы максимально чистый способ.

Большое спасибо за Вашу помощь.