Lazy-loaded routes not working in single-spa setup with Angular 19

[karanmobilesentrix]

I’ve configured a single-spa root application along with two Angular 19 applications. The basic route configuration works fine when directly assigning components:

export const routes: Routes = [
  {
    path: "users",
    component: UsersComponent
  }
]

However, when I try to use lazy-loaded routes, the routing does not work as expected:

export const routes: Routes = [
  {
    path: "users",
    loadChildren: () =>
      import("./users/users.routes").then((m) => m.users)
  }
]

In main.single-spa.ts added as below

const lifecycles = singleSpaAngular({
    bootstrapFunction: (singleSpaProps) => {
        return bootstrapApplication(AppComponent, {
            providers: [
                ...getSingleSpaExtraProviders(),
                ...appConfig.providers,
                { provide: APP_BASE_HREF, useValue: '/user' },
            ],
        });
    },
    template: '<app-user />',
    Router,
    NgZone,
});

[internettrans]

Which version of single-spa-angular are you using? As far as I know, single-spa-angular@9 does not function with Angular 19. Single-spa-angular@10 is in beta and does work with Angular 19, but is a full rewrite that is not yet complete.

[mklemarczyk]

We are close to release Angualr v20, any news on possible support for it ? I seen that single-spa-angular@10 is still in beta.

[internettrans]

See #545 to track Angular 20 support

[jamie-perkins-sp]

We have lazy-loading working with ng19. @karanmobilesentrix I think you are missing this at the top of main.ts:

import { setPublicPath } from 'systemjs-webpack-interop';

setPublicPath('foo'); // location of js assets

[manbearwiz]

For what it's worth, we are using single-spa-angular@9 with Angular 19 without issue. We are using esm bundles instead of systemjs or umd, but I really don't think that matters. It does mean you don't need to use systemjs-webpack-interop though.