Dynamic loading of angular directives is not added to $ compileProvider

Question

I cannot understand for life why this does not work. The directive file is loaded, but the actual directive is not loaded in angular, as it should be in defer.resolve () in routeProvider.js, as it should be.

I used these two examples as references, but have not yet understood why it does not work.

https://github.com/ifyio/angularjs-lazy-loading-with-requirejs https://github.com/DanWahlin/CustomerManager

Dynamic route

console.log('Log: initializing Providers');
        app.controller = $controllerProvider.register;
        app.service = $provide.service;
        app.factory = $provide.factory;
        app.filter = $filterProvider.register;
        app.directive = $compileProvider.directive;

        var route = routeResolverProvider.route;

        console.log('Log: initializing Routes');
        $routeProvider
            .when('/',
                route.resolve({
                    module:'start',
                    directives: ['moduleButton']
                })
            )

RouteProvider.js

define(['angular'], function () {
/**
 * this service returns a valid route definition object
 * for the angular route 'when' method
 *
 * @type {*|module}
 */
angular.module('routeResolver', [])

    .provider('routeResolver', function () {

        this.$get = function () {
            return this;
        };

        /**
         * configuration object
         */
        this.routeConfig = (function () {

            var serviceDirectory = 'scripts/services/',
                viewsDirectory = 'views/',
                modulesDirectory = 'data/',
                directiveDirectory = 'scripts/directives',

                setServiceDirectory = function (serviceDir) {
                    serviceDirectory = serviceDir + '/';
                },

                getServiceDirectory = function () {
                    return serviceDirectory;
                },

                setViewsDirectory = function (viewsDir) {
                    viewsDirectory = viewsDir + '/';
                },

                getViewsDirectory = function () {
                    return viewsDirectory;
                },
                getModuleDirectoy = function () {
                    return   modulesDirectory;
                },
                setModuleDirectory = function (moduleDir) {
                    modulesDirectory = 'data/' + moduleDir + '/';
                },
                getDirectiveDirectory = function(){
                    return directiveDirectory;
                },
                setDirectiveDirectory = function(directiveDir){
                    directiveDirectory = directiveDir + '/';
                }
            return {
                getModuleDirectory: getModuleDirectoy,
                setModuleDirectory: setModuleDirectory,
                setServiceDirectory: setServiceDirectory,
                getServiceDirectory: getServiceDirectory,
                setViewsDirectory: setViewsDirectory,
                getViewsDirectory: getViewsDirectory,
                getDirectiveDirectory: getDirectiveDirectory,
                setDirectiveDirectory: setDirectiveDirectory

            };
        }());

        /**
         * build and return the route definiation object
         */
        this.route = function (routeConfig) {

            var resolve = function (data) {

                    var viewDir;
                    var view = 'view' in data ? data.view : "index";
                    var module = 'module' in data ? data.module : "";
                    var services = 'service' in data ? data.services : [];
                    var directives = 'directives' in data ? data.directives : [];
                    if (view != 'index') {
                        viewDir = view + '/';
                    } else {
                        viewDir = '';
                    }

                    var routeDef = {};

                    routeConfig.setModuleDirectory(module);
                    routeConfig.setViewsDirectory(routeConfig.getModuleDirectory() + viewDir);
                    routeConfig.setDirectiveDirectory(routeConfig.getModuleDirectory() + routeConfig.getDirectiveDirectory());

                    routeDef.templateUrl = routeConfig.getViewsDirectory() + viewDir + view + '.html';
                    routeDef.controller = view + 'Ctrl';
                    routeDef.resolve = {

                        load: ['$q', '$rootScope', function ($q, $rootScope) {

                            /**
                             * init the dependencies array
                             * @type {Array}
                             */
                            var dependencies = [routeConfig.getViewsDirectory() + viewDir + view + '.js'];

                            /**
                             * add data.services to dependencies array
                             */
                            if (services) {
                                var service;
                                for (service in services) {
                                    if (services.hasOwnProperty(service)) {
                                        dependencies.push(routeConfig.getServiceDirectory() + services[service] + '.js');
                                    }
                                }
                            }
                            if(directives){
                                var directive;
                                for(directive in directives){
                                    if(directives.hasOwnProperty(directive)){
                                        dependencies.push(routeConfig.getDirectiveDirectory() + directives[directive] + '.js');

                                    }
                                }
                            }
                            return resolveDependencies($q, $rootScope, dependencies);
                        }]
                    };

                    return routeDef;
                },

                /**
                 * load the required dependencies, resolve
                 * a promise on success
                 * @param $q
                 * @param $rootScope
                 * @param dependencies
                 * @returns {Function|promise}
                 */
                    resolveDependencies = function ($q, $rootScope, dependencies) {
                    var defer = $q.defer();
                    require(dependencies, function () {
                        $rootScope.$apply(function(){
                            defer.resolve();
                        });
                    });

                    return defer.promise;
                };

            return {
                resolve: resolve
            }

        }(this.routeConfig);

    });
});

ModuleButton.js

define(['app'],function(app){
   app.directive('moduleButton',function(){
    return {
        templateUrl: '../views/moduleButton/moduleButton.html',
        restrict: 'E',
        scope: {

        },
        link: function(){
            console.log('hi');
        }

     }
  });
});