What is the most ideal way to integrate one Angular project app within another?

I currently have built this setup which basically allows a child app to be loaded after we supply the build files in a specific target location of the source code. The child project app is currently being used elsewhere as a standalone application and I am trying to implement the same project as a child application within a different parent application in such a way that I do not have to make major changes to child project source code.

https://stackblitz.com/edit/stackblitz-starters-eynryk?file=src/external/external.component.ts

One problem I encountered with this approach (Custom Elements) was that the routing functionality was superimposing itself over the ones from the parent project, how could I make sure that the routes from child instead only appends itself to whatever existing route URL we have on the parent project app? ex: if my external.component.ts which is responsible for loading the child has a default route of home/external, and if I were to load a functionality User management in child project with route users/manage, I need to make sure that the app routes to home/external/users/manage instead of simply users/manage, is this possible by conditionally setting up some injector/service class token in child app routing module?

Also since the second project app by itself is quite large, would it better to switch to a more defined microfrontend architecture using NX and/or module federation instead of custom elements? If that's the case how may I be able to implement the flow? Or would it make sense to copy and paste all of the components from child app manually into parent project source code so as to reduce the extra complexity?

for ref: child component routing file structure

@NgModule({
imports: [
RouterModule.forChild([
{
path: "",
component: HomeComponent,
canActivate: [AuthGuard],
canActivateChild: [AuthGuard], //activate for login authorization
children: [
{
path: "users/create",
component: CreateUserComponent,
}]},
{
path: "**",
redirectTo: "",
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
},
]),
],
exports: [RouterModule],
})

Continue reading...