Angular Routing Nested components not working

Question

I'm working in an Angular 10 application and I have some problem to go to nested components in routes loaded by lazy module. The thing is like this:

My app.component has a <router-outlet> which can display 2 different components, the app-layout.component, and the auth-layout.component. App component is only displayed if an auth guard authorize it. If not, then, it will displayed not-found route (also for '**' path)

The layouts has many HTML views that gives options to navigate to another modules, loaded by lazy loading. So app-layout and auth-layout also have their own <router-outlet> to show the modules.

Each module has their routing, but for now it only works as a parent a unique base component.

What I need is showing account-config component, put a <router-outlet> in and render other components inside ('couse account-config.component has a second navigation bar)

This image ilustrates what I need

I tried many ways to do it but it seems like I'm doing wrong.

Here's a minimal reproduction in stackblitz ------->>>> https://stackblitz.com/edit/angular-ivy-5nfvke?file=src/app/pages/modules/account-config/components/account-config/account-config.component.html

Is there any way to solve this problem?

Answer 1

you need to remove pathMatch: 'full' from the path account-config in app-routing.module.ts