How can I lazy configure types of angular formly?

Question

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

This is totally possible. Not sure what's wrong here. Could you create an example? — kentcdodds, Dec 28 '15 at 22:21
@kentcdodds i edited my question and i left a link at the bottom with the test case. You have to fire the console to see the logs... If you have any problem with the plnkr url just tell me to fix it. thank you! — CodeArtist, Dec 29 '15 at 05:09

score 0 · Accepted Answer · answered Dec 29 '15 at 06:34

@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

How can I lazy configure types of angular formly?

1 Answers1