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)
- singlespapoc/src is the main wrapper application for single-spa
- @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).
- @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


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)
Public (for unauthenticated routes like login, forgot-password, change-password).
Secure (for authenticated routes like profile and settings).
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