Running Angular Apps without SystemJS in single-spa

I got into angular, angularjs, systemjs, single spa, or single spa angular recently and thought of writing about single-spa - how to load an Angular app without using SystemJS. Hope it is making sense. let me know if it’s helpful!

Namaste! In the ever-evolving world of web development, keeping our toolkit sharp is vital, isn't it? Today, we're diving into an exciting question that many front-end developers ponder over. How can we efficiently load an Angular app in a single-spa framework without using SystemJS? If you're into building microfrontends or looking to integrate your Angular applications seamlessly, you're in the right spot. Let's explore this with warmth, as if we're chatting over a cutting chai.

The Problem at Hand

So, what's the chaos about SystemJS and Angular with single-spa? Here's the crux — you're looking to load an Angular application without relying on SystemJS, a module loader. While SystemJS can be quite useful, sometimes we simply need a different approach due to specific project requirements or personal preferences. And herein lies the challenge: how can we orchestrate multiple frameworks and libraries?

Exploring the Solutions

Thankfully, the vibrant developer community has shared a few clever hacks and methods to crack this nut! Below, I'll walk you through the suggested solutions that make integrating Angular apps into single-spa a breeze.

1. Using Webpack Module Federation

Imagine playing a game where different parts of your app come together gracefully. That's Webpack Module Federation for you! This tool can dynamically import code from other applications at runtime — perfect for our needs.

Here's a simple way to set it up:

// webpack.config.js
module.exports = {
  // other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: 'app',
      filename: 'remoteEntry.js',
      exposes: {
        './AppModule': './src/app/app.module.ts',
      },
    })
  ],
};

        

Integrating this into your AppModule allows you to bootstrap Angular apps independently, sidestepping SystemJS entirely. Trust me, once you get this rolling, you'll love the flexibility!

2. Direct Webpack Entry Points

This approach is like setting your own path through a jungle. You start by configuring Webpack to bundle your application entry points precisely. Here's a quick configuration:

// main-single-spa.ts
import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
import { AppModule } from './app/app.module';

export default singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    return platformBrowser(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '',
  NgZone: NgZone,
});
        

The beauty of this method is how you maintain control over the build process, guiding which modules load and how. Plus, using Angular's robust tooling, you still achieve a very efficient setup.

Final Thoughts and Suggestions

Pairing Angular with single-spa without SystemJS is quite the journey. Whether you choose Webpack Module Federation or another path, it's essential to test for compatibility and performance. At the end of the day, it's all about crafting a smooth user experience that scales effortlessly.

Have you tried implementing this yet? Hit me up with a personal experience if you've tackled something similar. Real-world stories often offer the most insightful lessons.

Thanks for stopping by! If you're interested in experimenting with these approaches, now's a great time. Grab a cup of coffee, open your code editor, and start weaving some magic.