title: ChunkLoad Error with Angular and module Federation
body: <p>I'm trying to create an angular <code>micro-frontends</code> using <code>module federation</code>. Following this <a href="https://blog.briebug.com/blog/micro-frontends-angular#:%7E:text=Micro%20Frontends%20(MFE)%20are%20the,to%20complete%20their%20work%20independently." rel="nofollow noreferrer">tutorial</a> (the angular CLI part), I've created 3 projects in an angular workspace: <em>shell</em>, <em>admin</em> and <em>dashboard</em>.</p>
  <p>I'm trying to create a simple example of micro-frontend, using <em>shell</em> as host and loading remotely <em>admin</em> and <em>dashboard</em>. I've created a repo for this : <a href="https://github.com/Aw3same/micro-frontend-mfe" rel="nofollow noreferrer">https://github.com/Aw3same/micro-frontend-mfe</a></p>
  <p>Every application run independently well , in <code>ports 3000, 4000 and 5000</code>. In shell, I have a routing that intends to load the other projects:</p>
  <pre class="lang-js prettyprint-override"><code>const routes: Routes = [
    {
      path: 'admin',
      loadChildren: () =&gt; import('admin/Module').then((m) =&gt; m.RemoteEntryModule)
    },
    {
      path: 'dashboard',
      loadChildren: () =&gt; import('dashboard/Module').then((m) =&gt; m.RemoteEntryModule)
  }
  ];
  </code></pre>
  <p>The entrypoints on the respectively projects are:</p>
  <p><em><strong>admin</strong></em></p>
  <pre class="lang-js prettyprint-override"><code>    new ModuleFederationPlugin({
          library: { type: &quot;module&quot; },
  
          // For remotes (please adjust)
          name: &quot;admin&quot;,
          filename: &quot;remoteEntry.js&quot;,
          exposes: {
              './Module': './projects/admin/src/app/app.module.ts',
          },
  
          shared: share({
            &quot;@angular/core&quot;: { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            &quot;@angular/common&quot;: { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            &quot;@angular/common/http&quot;: { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            &quot;@angular/router&quot;: { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  
            ...sharedMappings.getDescriptors()
          })
  
      }),
  </code></pre>
  <p><em><strong>dashboard</strong></em></p>
  <pre class="lang-js prettyprint-override"><code>    new ModuleFederationPlugin({
          library: { type: &quot;module&quot; },
  
          // For remotes (please adjust)
          name: &quot;dashboard&quot;,
          filename: &quot;remoteEntry.js&quot;,
          exposes: {
              './Module': './projects/dashboard/src/app/app.module.ts',
          },
  
          shared: share({
            &quot;@angular/core&quot;: { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            &quot;@angular/common&quot;: { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            &quot;@angular/common/http&quot;: { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            &quot;@angular/router&quot;: { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  
            ...sharedMappings.getDescriptors()
          })
  
      }),
  </code></pre>
  <p>When I try to load one of these projects (going to http://localhost:5000/admin, eg) , I receive this in console:
  <a href="https://i.stack.imgur.com/W7Pxq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W7Pxq.png" alt="Error 1" /></a></p>
  <p>All webpacks have this configuration:</p>
  <pre class="lang-js prettyprint-override"><code>  output: {
      uniqueName: &quot;dashboard&quot;,
      publicPath: &quot;auto&quot;,
      scriptType: 'text/javascript'
    },
  </code></pre>
  <p>What I am doing wrong? Any help would be appreciated</p>
  <p><strong>UPDATE</strong></p>
  <p>I changed the routing to load the micro-frontend in a dynamic way. I deleted the remotes entries from the shell <code>webpack.conf</code> and added this to the <code>shell.routing</code>:</p>
  <pre class="lang-js prettyprint-override"><code>const routes: Routes = [
    {
      path: 'admin',
      loadChildren: () =&gt;
        loadRemoteModule({
          type: 'module',
          remoteEntry: 'http://localhost:3000/remoteEntry.js',
          exposedModule: './Module',
        }).then((m) =&gt; m.RemoteEntryModule),
    },
    // Before
    // {
    //   path: 'admin',
    //   loadChildren: () =&gt; import('admin/Module').then((m) =&gt; m.RemoteEntryModule),
    // },
    {
      path: 'dashboard',
      loadChildren: () =&gt;
        import('dashboard/Module').then((m) =&gt; m.RemoteEntryModule),
    },
  ];
  </code></pre>
  <p><a href="https://i.stack.imgur.com/CO5I8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CO5I8.png" alt="Error 2" /></a></p>