SchemaForm does not load if optional dependencies are not included

[waleedasif322]

I want to make a pull request for this fix, but I want to know if this happens to others as well, or if it's only my problem. The documentation says that this and ui-sortable are optional, but I have to include them in my app, or this exception doesn't load the form:

try {
  //This throws an expection if module does not exist.
  angular.module('angularSpectrumColorpicker');
  deps.push('angularSpectrumColorpicker');
} catch (e ) {}

I get an exception that schemaForm dependency was not loaded. Do other people have this problem, or is it only me? I am using ocLazyLoad.

If other people have this problem too, I will send a pull request for a workaround.

[davidlgj]

Oh, that is weird. I don't have that problem, could you make a fiddle or a minimal example for me to try?

[andrepitombeira]

Hi @waleedasif322, I'm having the same problem. I'm also using ocLazyLoad. I loaded the required dependencies, but it was not working.

This is my ocLazyLoad config:

{      
    name: 'angularSchemaForm',
    files: [
      '../vendor/tv4/tv4.js',
      '../vendor/objectpath/lib/ObjectPath.js',
      '../vendor/angular-schema-form/dist/schema-form.min.js',
      '../vendor/angular-schema-form/dist/bootstrap-decorator.min.js'
    ]
}

[waleedasif322]

Hey, I actually just hacked around it and it's not a good solution. I removed the try catch which checks for the optional dependencies, and I had to manually load schema form source files in my index.html, instead of through oclazyload. I forgot why I had to do this, but when I get home I'll investigate more.

[andrepitombeira]

Did schemaForm in the index file without the optional dependencies work? The problem I'm having now is I have oclazyload with ui router and it's taking some time to load all the dependencies and when I refresh the page I get sometimes an exception TypeError: Cannot read property 'text' of undefined

[andrepitombeira]

@waleedasif322 I loaded all the dependencies in the index file and it worked great. It solved all my problems. Now the question is why schemaForm is not working with oclazyload? I suspect it's related to async load dependencies.

[waleedasif322]

Not sure why, I didn't have time to debug it, but if you turn on the debug
option in oclazyload, you can see which files are loaded in which order
which can help you debug the problem

On 4:58AM, Tue, Sep 1, 2015 André Pitombeira notifications@github.com
wrote:

@waleedasif322 https://github.com/waleedasif322 I loaded all the
dependencies in the index file and it worked great. It solved all my
problems. Now the question is why schemaForm is not working with
oclazyload? I suspect it's related to async load dependencies.

—
Reply to this email directly or view it on GitHub
#457 (comment)
.

[waleedasif322]

Try putting this before your dependencies:

angular.module('ui.sortable',[]);
angular.module('angularSpectrumColorpicker',[]);

Let me know if it helps to get around the error you were getting. If you ever have to update schema-form you don't want to have to manually go and comment out those lines again.

[waleedasif322]

Ok so using the above, you can use ocLazyLoad but you have to specify serie: true to make it work so that the files are loaded in order:

      {
        name:'schema-form',
        files:
            [
                'master/bower_components/tv4/tv4.js',
                'master/bower_components/objectpath/lib/ObjectPath.js',
                "master/bower_components/angular-schema-form/dist/schema-form.js",
                "master/bower_components/angular-schema-form/dist/bootstrap-decorator.js",
                "master/bower_components/angular-schema-form-dynamic-select/angular-schema-form-dynamic-select.js"
            ],
          serie: true

      },

This way you can avoid putting the files in your index.html file and lazy load them instead

[waleedasif322]

@davidlgj I am closing this issue since it is specific to using ocLazyLoad and the fix for it are my two comments above.

[dannygoncalves]

@waleedasif322 You should not have closed this issue, most scaffolding and projects are using lazyload and ui-router, I'm having the same issue. and removing the try catch, or including the files on index.html is a solution I do not like, anyway thanks for your effort, really appreciate it.

[waleedasif322]

@dgoncalves1 if you see my last two comments before I closed the issue, that solves the error without having to remove the try-catch in the library code.

[dannygoncalves]

@waleedasif322 I get this using lazyload, as soon as I add it to the resolve in the ui-route config file.

Error: The module "ui.sortable" that you are trying to load does not exist. [$injector:nomod] Module 'ui.sortable' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument

[waleedasif322]

Could you post a snippet of your file?

[dannygoncalves]

Yeah, I have two ways to include the dependencies, on the whole application, or using lazyload, first method didn't worked at all, so i used Lazyload, following what you said. This is my whole lazyload file @waleedasif322

`

angular
    .module('app.lazyload')
    .constant('APP_REQUIRES', {
      // jQuery based and standalone scripts
      scripts: {
        'modernizr':                ['vendor/modernizr/modernizr.js'],
        'icons':                    ['vendor/fontawesome/css/font-awesome.min.css',
                                      'vendor/simple-line-icons/css/simple-line-icons.css',
                                      'vendor/Ionicons/css/ionicons.min.css'],
        'moment' :                  ['vendor/moment/min/moment-with-locales.min.js'],
        'loaders.css':              ['vendor/loaders.css/loaders.css'],
        'spinkit':                  ['vendor/spinkit/css/spinkit.css']
      },
      // Angular based script (use the right module name)
      modules: [
        {name: 'datatables',                files: ['vendor/datatables/media/css/jquery.dataTables.css',
                                                    'vendor/datatables/media/js/jquery.dataTables.js',
                                                    'vendor/angular-datatables/dist/angular-datatables.js'], serie: true},
        {name: 'schemaForm',                files: ['vendor/tv4/tv4.js',
                                                    'vendor/objectpath/lib/ObjectPath.js',
                                                    'vendor/angular-schema-form/dist/schema-form.js',
                                                    'vendor/angular-schema-form/dist/bootstrap-decorator.js'], serie: true}
      ]
    });

`