Mirage.js Endpoints Not Found After Navigating and Reloading in Lazy-Loaded Angular App

[JangoCG]

Description:
I'm currently integrating Mirage.js with an Angular SPA for API mocking. The Mirage server is initialized in the main.ts file, which is before the Angular SPA bootstraps. The setup works correctly upon the initial load of the application. However, when navigating to a route that is lazy-loaded and then performing a page reload, the Mirage endpoints are not found (resulting in a 404 response). There is no indication that Mirage acknowledges these routes after the reload.

Steps to Reproduce:

Start the Angular application with Mirage.js initialized in main.ts.
Access a route corresponding to a Mirage.js mocked endpoint - it works as expected.
Navigate to a different route that is lazy-loaded.
Reload the page.
Attempt to access the same Mirage.js mocked endpoint.
Observe a 404 response, indicating the endpoint is not recognized by Mirage.
Expected Behavior:
Mirage.js should consistently mock the endpoints across the Angular application, regardless of navigating and reloading, even in lazy-loaded modules.

Actual Behavior:
After navigating to a lazy-loaded route and reloading the page, Mirage.js mocked endpoints become unrecognized, and a 404 response is returned for those endpoints.

Additional Context:

It seems that the issue might be related to how Mirage.js integrates with Angular's lifecycle and module system, especially considering lazy-loaded routes.
Code snippets for reference:
Mirage Server Initialization in main.ts:

import startServer from "./mirage/server";
startServer();

Mirage Server defintion

export default function startServer() {
  createServer({
    routes() {
      this.get("/api/message/v1/messages", () => {
        return [{ id: "123", type: "GENERAL" }];
      });
      this.passthrough();
    }
  });
}

Possible Solutions or Ideas:

Is there a recommended approach to ensure Mirage.js works seamlessly with Angular's lazy-loaded modules?
Could this be an issue with Mirage's global scope handling in a modular Angular environment?
Any insights or suggestions would be greatly appreciated.

[Apetree100122]

"function "startServer(
)
'Import
start
Server from
"
./mirage
/server
"start_Server___(>

); { createServer(>
{routes(>
) {this.get(>
"/api/message/v1/messages", (

) =
{ return [
{ id: "123", type: "GENERAL"
}
]; });this.passthrough()
}
}
);Export _startServer from
"./mirage/server";
startServer(
);}