Cannot resolve library amcharts5 for remote application, this issue related to Microfrontend - Angular - Nx

[trminhphu79]

Hello everyone,

Has anyone worked with Nx Microfrontend before?

I’m trying to build a microfrontend using Nx, Angular, and Module Federation, but I’m encountering an issue when loading the amCharts 5 library in a remote application.

When I configure the remote app as an Angular application (within a shell), everything works fine. However, when I try to run the remote app independently (without the shell), the application fails to start, showing an error that amCharts 5 cannot be resolved.

Here’s my current configuration for the remote app:

App Shell Route:

import { Route } from '@angular/router';
import { loadRemote } from '@module-federation/enhanced/runtime';
import { ReactWrapperComponent } from './wrapper/react/react-wrapper.component';

export const appRoutes: Route[] = [
  {
    path: 'angular',
    loadChildren: () =>
      loadRemote<typeof import('angular/Routes')>('angular/Routes').then(
        (m) => m!.remoteRoutes
      ),
  },
  {
    path: '',
    loadChildren: () =>
      loadRemote<typeof import('angular/Routes')>('angular/Routes').then(
        (m) => m!.remoteRoutes
      ),
  },
  {
    path: 'blog',
    component: ReactWrapperComponent,
    data: {
      elementName: 'blog-react',
      loadChildren: () => import('blog/Module').then((m) => m!.default),
    },
  },
  {
    path: 'admin',
    component: ReactWrapperComponent,
    data: {
      elementName: 'admin-react',
      loadChildren: () => import('admin/Module').then((m) => m!.default),
    },
  },
];

Remote app configuration:

const config: ModuleFederationConfig = {
  name: 'angular',
  exposes: {
    './Routes': 'apps/angular/src/app/remote-entry/entry.routes.ts',
  },
  shared: (libraryName: string, sharedConfig: SharedLibraryConfig) => {
    const sharedDeps: Record<string, SharedLibraryConfig> = {
      '@amcharts/amcharts5': {
        singleton: true,
        eager: true,
        strictVersion: true,
        requiredVersion: '5.11.1',
      },
    };
    return sharedDeps[libraryName];
  },
  disableNxRuntimeLibraryControlPlugin: true,
};
export default config

App shell configuration:

const config: ModuleFederationConfig = {
  name: 'shell',
};

/**
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
export default config

Package Information:

    "@amcharts/amcharts5": "^5.11.1",
    "@angular/animations": "~19.1.0",
    "@angular/common": "~19.1.0",
    "@angular/compiler": "~19.1.0",
    "@angular/core": "~19.1.0",
    "@angular/forms": "~19.1.0",
    "@angular/platform-browser": "~19.1.0",
    "@angular/platform-browser-dynamic": "~19.1.0",
    "@angular/router": "~19.1.0",
    "@nx/angular": "^20.4.6",