In Angular module federation, how do I expose/access the application component of my remote module?

Question

I'm using Angular 14 and module federation. I would like to know how to access my remote module's application component from my shell application. In my remote module, I have this webconfig.config.js set up

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  name: 'productlist',

  exposes: {
    './Component': './src/app/app.component.ts',
    './home':'./src/app/my-module/my-module.module.ts'
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

In my src/app/app.component.ts file I have

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'myco-ui-productlist';
}

and my src/app/app.component.html file looks like

<router-outlet></router-outlet>

In my shell application, I have this in my webpack.config.js

module.exports = withModuleFederationPlugin({

  name: 'shell',

  remotes: {
    "productlist": "http://localhost:8001/remoteEntry.js",
  },

and this set up for my routes

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      ...
      {
        path: 'products-list',
        loadChildren: () => import('productlist/Component').then(m => m.ProductListsModule)
      }
    ],
  }
]

but in my shell application, when I go to the specified route (/products-list), I get this JS error

ERROR Error: Uncaught (in promise): TypeError: type is undefined
getNgModuleDef@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:1675:23
NgModuleRef@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:25461:39
create@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:25505:12
loadChildren/loadRunner<@http://localhost:8000/node_modules_angular_router_fesm2020_router_mjs-_6f000.js:5634:36
map/</<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:3325:31
OperatorSubscriber/this._next<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:1777:15
next@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:748:12
doInnerSub/<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:3493:20
OperatorSubscriber/this._next<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:1777:15
next@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:748:12
fromPromise/</<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:1468:20
invoke@http://localhost:8000/polyfills.js:8158:158
onInvoke@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:30816:25
invoke@http://localhost:8000/polyfills.js:8158:46
run@http://localhost:8000/polyfills.js:7899:35
scheduleResolveOrReject/<@http://localhost:8000/polyfills.js:9243:28
invokeTask@http://localhost:8000/polyfills.js:8191:171
onInvokeTask@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:30804:25
invokeTask@http://localhost:8000/polyfills.js:8191:54
runTask@http://localhost:8000/polyfills.js:7952:37
drainMicroTaskQueue@http://localhost:8000/polyfills.js:8400:23
promise callback*nativeScheduleMicroTask@http://localhost:8000/polyfills.js:8371:18
scheduleMicroTask@http://localhost:8000/polyfills.js:8382:30
scheduleTask@http://localhost:8000/polyfills.js:8181:28
onScheduleTask@http://localhost:8000/polyfills.js:8079:61
scheduleTask@http://localhost:8000/polyfills.js:8174:43
scheduleTask@http://localhost:8000/polyfills.js:8000:35
scheduleMicroTask@http://localhost:8000/polyfills.js:8025:19
scheduleResolveOrReject@http://localhost:8000/polyfills.js:9231:10
resolvePromise@http://localhost:8000/polyfills.js:9159:34
makeResolver/<@http://localhost:8000/polyfills.js:9065:23
wrapper/<@http://localhost:8000/polyfills.js:9082:25
webpackJsonpCallback@http://localhost:8001/remoteEntry.js:8793:41
@http://localhost:8001/src_app_app_component_ts.js:1:105

and nothing loads. What else do I need to do to expose the remote module's application component and load it successfully?

Can you please create a simple github repo to reproduce it? – yurzui Dec 08 '22 at 18:24 — yurzui, Dec 08 '22 at 18:24

score 0 · Answer 1 · answered Dec 08 '22 at 09:25

0

In your routes setting you are not calling loadRemoteModule. Should be something like this:

path: 'products-list',
loadChildren: () =>
        loadRemoteModule({
          type: 'module',
          remoteEntry: 'http://localhost:8001/remoteEntry.js',
          exposedModule: './ProductListsModule',
        }).then(m => m.ProductListsModule)),

answered Dec 08 '22 at 09:25

JanBrus

1,198
9
13

How do I access the AppComponent from the remote application in my shell application? – Dave Dec 08 '22 at 14:51
In my remote application, I'm able to expose the component using "'./Component': './src/app/app.component.ts',". You're saying it's not possible to access that in the shell application? – Dave Dec 08 '22 at 20:50
Go to shell application url and add /products-list in the url, you should be able to see app.component of the remote. – JanBrus Dec 09 '22 at 14:27

In Angular module federation, how do I expose/access the application component of my remote module?

1 Answers1