title: <html ng-app="app"> convert to single-spa will make directives in the index.html disappear
body: <p>I have an angular.js app where the <strong>index.html</strong> looks something like with <code>ng-app</code> in the <code>&lt;html&gt;</code> tag</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html lang=&quot;en&quot; ng-app=&quot;app&quot;&gt;
     &lt;head&gt;&lt;/head&gt;
     &lt;body&gt;
        &lt;custom-navbar-directive&gt;&lt;/custom-navbar-directive&gt; //angular js directive
        &lt;custom-loader&gt;&lt;/custom-loader&gt;
  
        &lt;!-- To render components --&gt;
        &lt;div ui-view ng-cloak&gt;&lt;/div&gt;
      
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I was following the steps in the <a href="https://single-spa.js.org/docs/ecosystem-angularjs" rel="nofollow noreferrer">single-spa angular.js guide</a>. I removed the <code>ng-app</code> from <code>&lt;html&gt;</code> tag and added the following in my <strong>app.js</strong></p>
  <pre><code>System.register([], function (_export) {
    return {
      execute: function () {
        _export(
          window.singleSpaAngularjs.default({
            angular: angular,
            mainAngularModule: &quot;app&quot;,
            uiRouter: true,
            preserveGlobal: false,
          })
        );
      },
    };
  });
  </code></pre>
  <p>Also I did the import map and <code>singleSpa.registerApplication</code>  steps in the <strong>index.html</strong>
  My issue is now the content is rendering but the <code>&lt;custom-navbar-directive&gt;</code> and <code>&lt;custom-loader&gt;</code>  are missing. I added them inside the <strong>index.html</strong> since they are commonly used in each html template.
  When I inspect and checked the rendered html I noticed that they are outside the loaded single spa angularjs app</p>
  <pre class="lang-html prettyprint-override"><code>&lt;custom-navbar-directive&gt;&lt;/custom-navbar-directive&gt;
  &lt;custom-loader&gt;&lt;/custom-loader&gt;
  
  &lt;div id=&quot;single-spa-application:legacyAngularApp&quot;&gt;
    &lt;div id=&quot;__single_spa_angular_1&quot; class=&quot;ng-scope&quot;&gt;
         &lt;!-- content --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I guess since they are directives if those are inside the <code>&lt;div id=&quot;__single_spa_angular_1&quot; class=&quot;ng-scope&quot;&gt;</code> then it should render.<br />
  Any idea how to solve this?</p>