0

MFE1 will expose some functionality including some html using createCustomElement angular/elements

MFE2, which is expected to use this remote MFE html as it is. it will embedded and create from calling multiple domain specific mfes.

Following are some details about approach:

MFE1 web pack config

    const singleSpaAngularWebpack =
      require('single-spa-angular/lib/webpack').default;
     const { merge } = require('webpack-merge');
     const { EnvironmentPlugin } = require('webpack');
     const { ModuleFederationPlugin } = require('webpack').container;

     require('dotenv').config();

    module.exports = (config, options) => {
       const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);
       return merge(singleSpaWebpackConfig, {
       output: {
          scriptType: 'text/javascript'
        },
        plugins: [new ModuleFederationPlugin({
        name: 'mfe1',
        filename: 'remoteEntry.js',
        exposes: {
             './Module': 'src/app/app.module.ts',
        } 
      }),
      new EnvironmentPlugin(['ENVIRONMENT'])],
        })
       }

main.ts file MF2 - calling remote MFE1

import { loadRemoteEntry } from '@angular-architects/module-federation';

Promise.all([
  loadRemoteEntry({
    type: 'module',
    remoteEntry: 'http://localhost:4206/remoteEntry.js',
  }),
])
  .catch((err) => console.error('Error loading remote entries', err))
  .then(() => import('./bootstrap'))
  .catch((err) => console.error(err));

And my MFE2 routing file is

import { APP_BASE_HREF } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { EmptyRouteComponent } from './core/components/empty-route/empty-route.component';
import { loadRemoteModule } from '@angular-architects/module-federation';

const routes: Routes = [
 {
  path: 'test',
  loadChildren: () =>
      loadRemoteModule({
          type: 'module',
          remoteEntry: 'http://localhost:4206/remoteEntry.js',
          exposedModule: './Module'
      })
      .then(m => m.MyModule)
},
 { path: '**', component: EmptyRouteComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
})
export class AppRoutingModule {}

Problem:

ngx-logger.mjs:607 2023-02-19T14:59:44.358Z ERROR [main.js:575:21] Error from global error handler in order Error: Uncaught (in promise): TypeError: container.init is not a function TypeError: container.init is not a function at angular-architects-module-federation-runtime.mjs:27:1

ngx-logger.mjs:607 2023-02-19T14:59:44.363Z ERROR [main.js:575:21] Error from global error handler in order Error: Uncaught (in promise): TypeError: container.get is not a function TypeError: container.get is not a function at angular-architects-module-federation-runtime.mjs:10:1

What would it be missing?

naveen
  • 11
  • 4

1 Answers1

0

Check that in tsconfig.json, in lib array, it's using es2020. So that the correct runtime for angular architects is utilized.

"lib": ["es2020", "dom"]
JJMoo
  • 1