Create component used to include other components or static resources

Question

In a custom lightning aura component app, I have a component where I want to include a static resource.

I have successfully created the static resource (a JavaScript file) and included it in the component like so:

<!-- someComponent.cmp -->
<aura:component controller="SomeController" implements="..." access="global">
    <ltng:require scripts="{!$Resource.GlobalJs}" />
</aura:component>

Now there may be other static resources or components that I'd like to include in the future, for all components. I don't want to have to add each global entity to every component every time I realize I need a new global resource. So - is it possible to create a component solely for the purpose of including global static resources and other components?

I tried creating such a component like this...

<!-- globalIncludes.cmp -->
<aura:component>
    <ltng:require scripts="{!$Resource.GlobalJs}" />
</aura:component>

...and then including that inside the main component like this:

<!-- someComponent.cmp -->
<aura:component controller="SomeController" implements="..." access="global">
    <c:globalIncludes/>
</aura:component>

But this doesn't appear to be working - I'm getting a JavaScript error as if the JavaScript file wasn't included properly. Is it possible to do what I'm trying to do? Am I doing something wrong?

Answer 1

Imported scripts are isolated to the component in which they were imported in to. This is a security feature. Behind the scenes, each component gets its own window object instead of the global window that browsers use by default. You could choose to export a method that your component could use, I guess:

<aura:component>
    <ltng:require scripts="{!$Resource.GlobalJs}" afterScriptsLoaded="{!c.setGlobalValues}" />
    <aura:method name="getGlobalValue" action="{!c.getGlobalValue}">
      <aura:attribute name="name" type="Object" />
    </aura:method>          
</aura:component>

...

({ // controller
  setGlobalValues: function(c, e, h) {
    h.setGlobalValues(); // we can only store stuff on the helper
  },
  getGlobalValue: function(c, e, h) {
    return h.getGlobalValue(e.getParam('arguments').name);
  }
})

...

({ // helper
  setGlobalValues: function() {
    this.globals = { value1, value2, value3 }; // Assuming they were set in script.
  },
  getGlobalValue: function(name) {
    return this.globals[name];
  }
})

Even then, you'll have to reference them through the component:

<c:globalIncludes aura:id="globals"/>

...

component.find("globals").getGlobalValue("value1");

Would all this be worth it? Not directly as written, but perhaps a more elegant design could be to have an inheritable component:

<aura:component extends="c:globalIncludes">
</aura:component>

The c:globalIncludes component would load the globals as normal, and the helper would include a method to read those global values:

getGlobalValue: function(name) {
  return this.globals[name];
}

Then, in your other components, you could call a helper method:

this.getGlobalValue('value1');

Honestly, if you can get away with it, it's time to start using LWCs. You can easily import global values from a common source, and you don't even need a static JS file:

import globals from 'c/globalValues';

Where the globals are exported directly:

const globals = { value1: 5, value2: 10, value3: 15 }
export default globals;

As you can see, it ends up being a lot more simple when you can just directly import the values.