1

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 enter image description here

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?

Improve this question

1 Answer 1

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much, it worked!! I put the "pathMatch: 'full'" because I use a canLoad connected with ngrx to maintain the session.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.