Angualr Routing if i go to component by routing cannot back tio Menu by routerLink="/home"

Question

In Angular I created routing with two outlets goal is to to have two outlets and component should react in other way which button You click, my solutions work if we click button New Meeting whole menu is replaced by this component problem is when You want back to the MainMenuComponent the button with RouterLink didt work. When We click button keyboard_backspace url at the top blinking but adress is still http://localhost:4200/new-meeting, NewMeeting Page elements gone which is good but MainMenu didt show. You can check how this bug look at preview https://board-meetings.vercel.app/home If someone have any idea how to fix I will be very grateful.

this how looks Routing

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'new-meeting', component: NewMeetingPageComponent },
  {
    path: 'home',
    component: MainMenuComponent,
    children: [
      { path: 'about', component: AboutComponent, outlet: 'bottomOutlet' }
    ]
  }
];


@NgModule({
  declarations: [],
  imports: [
    CommonModule, RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

and Main menu Component :

<div>
  <div class="centered-top-container">
    <h3>Main Menu</h3>
    <div class="centered-top-container margin-top-10px">
      <button mat-stroked-button class="margin-top-10px" routerLink="/new-meeting">New Meeting</button>
      <button mat-stroked-button class="margin-top-10px"
        [routerLink]="[{ outlets: { bottomOutlet: ['about'] } }]">About</button>
    </div>
  </div>
  <router-outlet name="bottomOutlet"></router-outlet>
</div>

last element NewMeetingPage:

<div class="header">
    <div class="padding-left-30px">
        <button mat-icon-button matSuffix routerLink="home"><mat-icon>keyboard_backspace</mat-icon></button>
    </div>
    <div class="near-button-container gap-20px">
        <button mat-stroked-button (click)="saveDraft()">Save as draft</button>
        <button mat-stroked-button (click)="saveAndPublish()" [disabled]="!formNotReady()">Save & Publish</button>
    </div>
</div>
<div class="separator-horizontal margin-top-10px" style></div>
<div class="flex-container">
    <div class="main-menu">
        <app-new-meeting></app-new-meeting>
    </div>
    <div class="separator-vertical"></div>
    <div class="side-menu">
        <app-tasks (tasksListOutput)="saveTasksList($event)"></app-tasks>
        <app-invates></app-invates>
    </div>
</div>

I try to change Routing settings, and button router Link.

Answer 1

Check the console. There is an error, which leads to this piece of code:

ngOnDestroy() 
{
  this.newTaskSub.unsubscribe(),
  this.dialogEditSub.unsubscribe()
}

this.newTaskSub is undefined. And probably this.dialogEditSub too. Correct this, and see if it's working.

Answer 2

There is an error in the console on ngDestroy this.newTaskSub is undefined. First you need to check whether the this.newTaskSub exist or not then unsubscribe it. Here is the screenshot

You need to update the ngDestroy function code to following one

 ngOnDestroy() {
               if(this.newTaskSub) this.newTaskSub.unsubscribe()
               if(this.dialogEditSub) this.dialogEditSub.unsubscribe()
            }

I hope this will fix your issue.