Is there a way to add <head> elements before application's js and css


#1

Hi,
I want to add some cdn scripts in the head but I need them to be loaded before the main script of my meteor application.

When I try this with the static-html package the <script> blocks are rendered after the applications js in the head.

Does anyone have an idea how to render them before?

Thanks in advance
Max


#2

Just in case someone has the same issue

One way to do it is overwriting the boilerplate-generator and adjust its boilerplate_web.cordova.html by moving up the {{{head}}} statement

But I don’t know if I break something by doing that :wink:


#3

Isn’t it a better idea to just wait for the external script to be loaded before you execute the code which depends on it?


#4

In my case it is angular and my application code has a lot of angular.module(…) and so on, I could wrap everything in Metoer.startup but I think I will also slow down the process, wouldn’t it?


#5

Sorry not deep enough knowledge of Angular. Just in general I would not assume that elements are in the html file at the top. I would try to wait like a subscription for it to become reactively available. There is no slowdown because it can start when it’s ready. Thing is you needs some kind of loaded event / reactivity to attach your code in.

See last example here:

http://docs.meteor.com/#/full/Blaze-TemplateInstance-subscribe

This seems like a quite clean implementation of waiting until something is loaded:

mplate.listing.onRendered(function () {
  var template = this;

  template.subscribe('listOfThings', function () {
    // Wait for the data to load using the callback
    Tracker.afterFlush(function () {
      // Use Tracker.afterFlush to wait for the UI to re-render
      // then use highlight.js to highlight a code snippet
      highlightBlock(template.find('.code'));
    });
  });
});