"#37 Invalid application - no unmount function" when importing Angular 18 standalone app

[ShawnM1]

Describe the bug or question
I'm using single-spa (v6.0.3) as a root config to import a simple Angular 18 microfrontend that uses standalone components (no NgModule). After running the Angular schematic (ng add single-spa-angular) and adjusting for standalone components, I can build and serve the Angular app, and the root-config serves the import map. However when I visit the root-config (http://localhost:9000) I get:

$37: Invalid application - no unmount function

To Reproduce
Repo: https://github.com/ShawnM1/single-spa-playground

Start the Angular MFE dev server

cd angular-mfe
npm run serve:single-spa:angular-mfe
(serves at http://localhost:4200)
Start the root-config dev server

cd root-config
npm start
(serves at http://localhost:9000)
Open http://localhost:9000 in the browser.

Files / snippets used in my setup:

• root-config import map (index.ejs, local section)

{
  "imports": {
    "@app/root-config": "//localhost:9000/app-root-config.js",
    "@angular-demo": "//localhost:4200/main.js"
  }
}

• Angular single-spa entry

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return bootstrapApplication(AppComponent, appConfig);
  },
  template: '<app-root />',
  NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

Expected behavior
single-spa should import the microfrontend, find the exported lifecycle functions (bootstrap, mount, unmount), and mount the Angular app successfully. No #37: Invalid application - no unmount function error.

Screenshots and/or console output
If applicable, add screenshots or console output to help explain your problem.

Additional context

• single-spa root-config: v6.0.3
• angular: 18.2.0, using standalone components (no NgModule)
• single-spa-angular: ^9.2.0
• zone.js: ~0.14.10
• Repo: Repo: https://github.com/ShawnM1/single-spa-playground — root-config and angular-mfe are included there.

[ImriHarlev]

Fix for "Invalid application - no unmount function" Error

Root Cause

Two issues were causing the error:

1. Name mismatch: The import map and layout referenced @angular-demo, but the Angular app exports as angular-mfe (set via libraryName in angular.json).
2. UMD module loading: The Angular app is built as UMD (libraryTarget: "umd"), and import() with import maps may not resolve the UMD export correctly, so the lifecycle functions weren't accessible.

Solution

1. Fixed Import Map Name (root-config/src/index.ejs)

Changed the import map entry to match the Angular app's library name:

// Before:
"@angular-demo": "//localhost:4200/main.js"

// After:
"angular-mfe": "//localhost:4200/main.js"

2. Fixed Application Name in Layout (root-config/src/microfrontend-layout.html)

Updated the application name to match the import map:

<!-- Before: -->
<application name="@angular-demo"></application>

<!-- After: -->
<application name="angular-mfe"></application>

3. Added UMD Module Handling (root-config/src/app-root-config.js)

Added fallback logic to handle UMD modules that export as globals:

loadApp({ name }) {
  return import(/* webpackIgnore: true */ name).then((module) => {
    const globalModule = window[name];
    if (globalModule && globalModule.bootstrap && globalModule.mount) {
      return globalModule;
    }
    return module;
  });
}

After these changes, the Angular microfrontend loads and mounts successfully without the "no unmount function" error.

Maybe consider using ES module instead of UMD module for better performance.

Hope it helps :)

[arturovt]

Not related to this package.