Not working when we are calling preload in a Smart Package

[arthuryeti]

Hi @MiroHibler,

I notice something with smart packages and meteor-preloader. For example, I have my own smart package where I defined routes and I put the files that I need in the public folder, but the css files seems to not be loaded.

[MiroHibler]

Hey @Atu, could you post at least a part of your code so I can take a look at it?

[arthuryeti]

@MiroHibler Yes for sure.

/packages/admin/package.js

Package.describe({
  name: "xx:admin",
  version: "0.0.1"
});

Package.onUse(function (api) {

  api.versionsFrom(['METEOR@1.0']);

  api.use([
    'xx:lib'
  ]);

  api.addFiles([
    'lib/namespace.js',
    'lib/modules.js',
    'lib/menus.js',
    'lib/routes.js'
  ], ['client', 'server']);

  api.addFiles([
    'lib/client/templates/admin_dashboard.html',
    'lib/client/templates/admin_dashboard.js',
    'lib/client/templates/layout/admin_layout.html',
    'lib/client/templates/layout/admin_layout.js'
  ], ['client']);

});

/packages/admin/lib/routes.js

/**
 * The Applications.controllers namespace
 * @namespace Applications.controllers
 */
var subs = new SubsManager();
Admin.controllers = {};
Admin.preload = {
  styles: ['/bootstrap/css/bootstrap.min.css', '/datatables/css/jquery.datatables.css', '/fullcalendar/fullcalendar.css', '/modern.css', '/green.css', '/custom.css', '/line-icons/simple-line-icons.css'],
  async: ['/bootstrap/js/bootstrap.min.js', '/datatables/js/jquery.datatables.js', '/fullcalendar/fullcalendar.js'],
  verbose: true
};

/**
 * Controller for dashboard
 */
Admin.controllers.dashboard = PreloadController.extend({
  waitOn: function () {
    return [
      subs.subscribe("users")
    ];
  },
  data: function () {
    return {
      users: Meteor.users.find(),
      usersCount: Meteor.users.find().count()
    };
  }
});

Meteor.startup(function () {

  Router.route('/admin/dashboard', {
    name: 'admin_dashboard',
    template: 'admin_dashboard',
    layoutTemplate: "admin_layout",
    controller: Admin.controllers.dashboard,
    preload: Admin.preload
  });

});

And I have tested with my assets in the public folder of my package, and in the public folder of my app, both of them are not working.

[MiroHibler]

Try to add preloader as dependency (in /packages/admin/package.js, under api.use):

    api.use([
        'miro:preloader',    // <-------= dependency
        'xx:lib'
    ]);

to make sure it loads before your package.

Also, try to trace it in debugger...

[vectorselector]

I'm having a similar issue, where if I declare the css I wish to pre-load in my package.js under api.addFiles(); then they load automatically regardless of your loader, and if I declare them {isAsset:true} then they DON'T load no matter what I do. I've tried, as the original post author states, in the root public folder as well as my package folder, with all manner of path combinations... how do I declare the existence of these css files to my package without loading them until your loader loads them?

my package.js file

Package.onUse(function (api) {

api.use('iron:router'); api.use('miro:preloader'); api.use('my-package');

api.add_files([ 'lib/router.js', ],['client', 'server']);

api.addFiles([

'lib/client/layout.html',
'lib/client/landing_page.html'

], ['client']);

api.addFiles([ 'lib/public/rinjani.css', 'lib/public/animate.min.css', 'lib/public/owl.carousel.css', 'lib/public/owl.theme.css', 'lib/public/magnific-popup.css', 'lib/public/component.css', 'lib/public/bootstrap.min.css', 'lib/public/font-awesome.min.css' ],['client'], {isAsset: true});

});

and my router

Router.map(function() { 
        this.route('landing_page', 
        {   controller: PreloadController,
            path: '/landing_page',
            waitOn: function() { return Meteor.subscribe('landing_page_feed', this.params._id); },
            template: getTemplate('landing_page'),
            'preload': {'styles':[
                '/css/rinjani.css',
                '/css/owl.carousel.css',
                '/css/owl.theme.css',
                '/css/magnific-popup.css',
                '/css/component.css',
                '/css/bootstrap.min.css',
                '/css/font-awesome.min.css' ]}              
        })
    });

[vectorselector]

(not my choice to load all these silly css on one page, but i've a job to do, and they are breaking the rest of the site...)

[MiroHibler]

Hey @vectorselector,

1. Define your package styles with {isAsset: true} (as you already did)
2. They will be accessible from <author_name>_<package_name>/<path_within_package>/<file_name>.css (note the underscore instead of semicolon in package name!)

For example, to preload component.css you'd write in preloader.styles: /packages/my-name_my-package/lib/public/component.css

[MiroHibler]

Hey @vectorselector, did you work it out?