Registering multiple Dojo modules

EPiServer provides a way how to initialize Dojo modules in the module.config file. Unfortunately, you can set only one module initializer. In this article, I will describe how to solve this issue.

I had an issue with registering multiple Dojo modules after installing MenuPin package. My modules stopped working. After some investigation, I found the solution.

First of all, create another initializer under ClientResources - for now just a file for the initializer. I called it Initializer.js.

Module initializers in the ClientResources

Now register all initializers in the module.config.

<?xml version="1.0" encoding="utf-8"?>
<module>
  <assemblies>
    <add assembly="MyApp.Web" />
  </assemblies>
  <dojo>
    <paths>
      <add name="app" path="Scripts" />
      <add name="editors" path="Scripts/Editors" />
      <add name="menupin" path="Scripts/MenuPin" />
    </paths>
  </dojo>
  <clientModule initializer="app.Initializer">
    <moduleDependencies>
      <add dependency="CMS" type="RunAfter" />
    </moduleDependencies>
  </clientModule>
</module>

First of all, register Dojo modules in the module.config under dojo/paths section. Here I am registering three modules - app, editors and menupin with appropriate paths. Next, set default initializer on clientModule tag's initializer attribute. In my case it is initializer under app module - app.Initializer.

The last step is creating a default initializer itself in the Initializer.js file.

define([
// Dojo
    "dojo",
    "dojo/_base/declare",
//CMS
    "epi/_Module",
    "epi/dependency",
    "epi/routes",
    "app/MyInitializer",
    "menupin/MenuPinInit"
], function (
// Dojo
    dojo,
    declare,
//CMS
    _Module,
    dependency,
    routes,
    MyInitializer,
    MenuPinInit
) {

    return declare("app.Initializer", [_Module], {
        // summary: Module initializer for the default module.

        initialize: function () {

            this.inherited(arguments);

            var myinitializer = new MyInitializer();
            myinitializer.initialize();

            var minitializer = new MenuPinInit();
            minitializer.initialize();
        }
    });
});

Basically, it is standard Dojo module with an initialize method. As we need to call other module initializers - MyInitializer under app and MenuPinInit under menupin, we have to request those as dependencies. So in the definition of the module add "app/MyInitializer" and "menupin/MenuPinInit" where the first part is module name and second - initializer name. Initializers are module constructors - you can create new initializer objects in the initialize method and call initialize methods on these objects.