Single-SPA with Angular

with Angular Overview

with Angular is a building block you will reach for often in single-spa. It keeps related logic together and makes your intent obvious to reviewers and future maintainers.

When you learn with angular properly, you avoid the guesswork that leads to bugs and rework. The example below shows the shape you will use in most real single-spa projects.

import { singleSpaAngular } from 'single-spa-angular';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

export const { bootstrap, mount, unmount } = singleSpaAngular({
  bootstrapFunction: () => platformBrowserDynamic().bootstrapModule(AppModule),
  template: '<app-root />',
});

single-spa-angular wraps an Angular module as a single-spa micro frontend.

with Angular Example

registerApplication({
  name: '@org/app',
  app: () => System.import('@org/app'),
  activeWhen: ['/app'],
});
start();

• Start from a minimal with Angular example and grow it only as needed.
• Keep configuration explicit so with Angular behaves the same in every environment.
• Name things clearly so teammates understand your with Angular at a glance.
• Add tests around with Angular early to lock in expected behaviour.

Single-SPA Cheatsheet

Core single-spa APIs related to with angular.

How with Angular Works in Single-SPA

with Angular is part of how single-spa lets multiple applications — even in different frameworks — coexist on one page. A root config registers each app and controls when it is active.

single-spa-angular wraps an Angular module as a single-spa micro frontend.

• A root config registers apps and calls start().
• Each app exports bootstrap, mount, and unmount lifecycles.
• activeWhen decides which routes each app owns.
• Import maps resolve each app's bundle at runtime.

Practical Guidance for with Angular

For reliable micro frontends, with angular should isolate failures and keep shared state minimal. Let each team own its app end to end while agreeing on a few shared contracts.

Common Mistakes

• Copying with angular snippets without understanding what each line does.
• Skipping error handling and edge cases when wiring up with angular.
• Leaving with angular untested, so regressions slip into production.
• Over-engineering with angular before you actually need the extra flexibility.

Key Takeaways

• with Angular is a core part of working effectively with single-spa.
• Start small and keep with angular focused on a single responsibility.
• Apply consistent patterns so with angular scales across your project.
• Test and document with angular to keep it maintainable over time.