title: SAPUI5 - loading source library in component.js
body: <p>I am trying to use <strong>mobx</strong> (to use the observable pattern) inside my SAPUI5 fiori webapplication.</p>
  
  <p>For that purpose I have made a simple test project with the following example: <a href="https://www.tutorialspoint.com/Loading-External-Libraries-in-SAP-UI5" rel="nofollow noreferrer">mobx example</a> this works fine.</p>
  
  <p>Now my problem is, that my application will run in the fiori launchpad. Since I know, the <strong>index.html</strong> file will not be loaded, when the application runs in the launchpad.</p>
  
  <p>So the following parts should somehow be loaded in the <strong>component.js</strong> file:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/3.0.2/mobx.umd.js" type="application/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>data-sap-ui-resourceroots='{
                  "sap.ui.mobx": "test.project/libs/mobx/src",
                  "test.project": "./"
                  }'
  </code></pre>
  
  <p>I have so far searched for solutions, but I could not find a clear instruction.</p>
  
  <p>So does anyone know how I can load and define the <strong>mobx</strong> library in the component.js file, like i do it in the index.html?</p>
  
  <blockquote>
    <p>index.html:</p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;project&lt;/title&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/3.0.2/mobx.umd.js" type="application/javascript"&gt;&lt;/script&gt;
          &lt;script id="sap-ui-bootstrap"
              src="resources/sap-ui-core.js"
              data-sap-ui-theme="sap_belize"
              data-sap-ui-resourceroots='{
                  "sap.ui.mobx": "test.project/libs/mobx/src",
                  "test.project": "./"
                  }'
              data-sap-ui-compatVersion="edge"
              data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
              data-sap-ui-async="true"
              data-sap-ui-frameOptions="trusted"&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body class="sapUiBody"&gt;
          &lt;div data-sap-ui-component data-name="test.project" data-id="container" data-settings='{"id" : "project"}'&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>component.js:</p>
  </blockquote>
  
  <pre><code>sap.ui.define([
      "sap/ui/core/UIComponent",
      "sap/ui/Device",
      "test/project/model/models"
  ], function (UIComponent, Device, models) {
      "use strict";
  
      return UIComponent.extend("test.project.Component", {
  
          metadata: {
              manifest: "json"
          },
  
          /**
           * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
           * @public
           * @override
           */
          init: function () {
              // call the base component's init function
              UIComponent.prototype.init.apply(this, arguments);
  
              // enable routing
              this.getRouter().initialize();
  
              // set the device model
              this.setModel(models.createDeviceModel(), "device");
          }
      });
  });
  </code></pre>
  
  <p>I don't know how the component.js file should look like, where do I have to include the libraries and define the namespace <strong>sap.ui.mobx</strong>?</p>
  
  <p>Any help is appreciated, thanks.</p>