Search code examples
javascriptangularjsangular-ui-routerangular-formlyoclazyload

How can I lazy configure types of angular formly?


I'm trying to lazy configure custom types of angular-formly with ocLazyLoad but I cannot. When the state is executing I'm trying to call the setType function but the page does not load anything after that. When I remove the setType function everything works fine. Is there any way to lazy configure the formly types?

formlyConfig.setType({
  name: 'input',
  template: '<input ng-model="model[options.key]" />'
});

Roughly, this is the example:

//ocLazyLoad Configurations
$ocLazyLoadProvider.config({
    events: true,
    debug: true,
    modules: [
        {
            name: "formly",
            files: [ "Scripts/formly/angular-formly.js" ]
        },
        {
            name: "formlyBootstrap",
            files: [ "Scripts/formly/angular-formly-templates-bootstrap.js" ]
        }
    ]
});

//Ui-Router Configs
$stateProvider
.state("admin", {
    abstract: true,
    url: "/admin",
    templateUrl: "App/admin/templates/content.html",
    resolve: {
        loadApiCheck: ["$ocLazyLoad", function ($ocLazyLoad) {
            return $ocLazyLoad.load("Scripts/formly/api-check.js");
        }],
        loadFormly: ["loadApiCheck", "$ocLazyLoad", function (loadApiCheck, $ocLazyLoad) {
            return $ocLazyLoad.load("formly");
        }],
        loadFormlyBootstrap: ["loadFormly", "formlyConfig", "$ocLazyLoad", function (loadFormly, formlyConfig, $ocLazyLoad) {
            //* * *
            //After formlyConfig.setType() nothing gets executed
            //* * *
            debugger;
            formlyConfig.setType({
                name: 'input',
                template: '<input ng-model="model[options.key]" />'
            });
            return $ocLazyLoad.load("formlyBootstrap");
        }]
    }
})
.state("admin.contact", {
    url: "/contact",
    controller: "contactCtrl",
    controllerAs: "vm",
    templateUrl: "App/admin/templates/contact.html",
    resolve: {
        loadFunctionalityFiles: ["$ocLazyLoad", function ($ocLazyLoad) {
            return $ocLazyLoad.load({
                serie: true,
                files: [
                    "App/admin/factories/userFactory.js",
                    "App/admin/controllers/contactController.js"
                ]
            });
        }]
    }
});

Finally, here is the documentation, just in case: Angular-Formly extending types

And here i've made a plnkr test case


Solution

  • @kentcdodds i managed to solve this particular problem i think but i'm not 100% sure, however in this example it is working. The solution to my problem is to call setType function after formlyBootstrap is loaded.

    The code to achieve that is the following:

    $stateProvider
    .state("admin", {
        abstract: true,
        url: "/admin",
        templateUrl: "content.html",
        resolve: {
            loadApiCheck: ["$ocLazyLoad", function($ocLazyLoad) {
                return $ocLazyLoad.load("//npmcdn.com/api-check@latest/dist/api-check.js");
            }],
            loadFormly: ["loadApiCheck", "$ocLazyLoad", function(loadApiCheck, $ocLazyLoad) {
                return $ocLazyLoad.load("formly");
            }],
            loadFormlyBootstrap: ["loadFormly", "$ocLazyLoad", "formlyConfig", function(loadFormly, $ocLazyLoad, formlyConfig) {
                return $ocLazyLoad
                    .load("formlyBootstrap")
                    .then(function() {
                        console.log("reached critical point...");
                        formlyConfigurations(formlyConfig);
                        console.log("passed critical point!");
                    });
            }]
        },
        onEnter: ["$log", "$state", function($log, $state) {
            $log.info("state admin entered");
        }]
    });
    

    here is the plnkr