Skip to content

Issue with Loading Nested Angular Microfrontends within Component of Primary Microfrontend in Single-SPA Setup #1287

Description

@sunilmkamble17

Hi Team,

trying to setup single-spa with angular19 microfrontends
which will have separate handling for authenticated user and unauthenticated users as mentioned in below folder structure,

singlespapoc/
│── app-layout/ (Angular microfrontend)
│ ├── src/
│ │ ├── app/
│ │ │ ├── app.routes.ts ✅ (Main routing file for @anddone/layout)
│ │ │ ├── component/
│ │ │ │ ├── public/ (Public Component - Unauthenticated routes)
│ │ │ │ │ ├── auth.routes.ts ✅
│ │ │ │ ├── secure/ (Secure Component - Authenticated routes which loads profile or settings microfrontends dynamically)
│ │ │ │ │ ├── secure.routes.ts ✅
│── app-profile/ (Angular microfrontend)
│── app-settings/ (Angular microfrontend)
│── src/ (Single-SPA Wrapper)

  1. singlespapoc/src is the main wrapper application for single-spa
  2. @anddone/layout is the primary microfrontend(angular19), and it contains two parts/components:
    Public (for unauthenticated routes like login, forgot-password, change-password).
    Secure (for authenticated routes like profile and settings).
  3. @anddone/profile and @anddone/settings are separate Angular microfrontends(angular19), which should be loaded within the Secure Component of @anddone/layout.

versions:
Angular CLI: 19.0.7
Node: 22.13.0

so i am facing issue with loading microfrontends
localhost:9000/#/login ---loading--->login component
localhost:9000/#/profile ---not loading--->profile microfrontend
localhost:9000/#/settings ---not loading--->settings microfrontend

if try to navigate to profile ie. localhost:9000/#/profile,
i can see on browser network tab the remoteEntry.js file is getting served from localhost:4202/remoteEntry.js
similarly navigate to settings ie. localhost:9000/#/settings
i can see on browser network tab the remoteEntry.js file is getting served from localhost:4203/remoteEntry.js

but getting error
load.js:100 single-spa minified message #37: See https://single-spa.js.org/error/?code=37&arg=application&arg=@anddone/profile&arg={"0":[[792],{},null],"default":[[[792],{},null]],"__useDefault":true}

zone.min.js:13 Uncaught Error: application '@anddone/profile' died in status LOADING_SOURCE_CODE: undefined

zone.min.js:27 Unhandled Promise rejection: Cannot read properties of undefined (reading 'init') ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'init')

zone.min.js:27 Unhandled Promise rejection: Cannot read properties of undefined (reading 'get') ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'get')

please refer the repo given below for clear understanding,
https://github.com/sunilmkamble17/singlespapoc/tree/dev

Image

Image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions