how to active a link as default to pass parameters to route

I configured my app in two levels for nested routing as shown in the snapshot image.
enter image description here

the content of app modules is:
app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    TeacherMembershipComponent,
    StudentMembershipComponent,
    RulesComponent,
    ContactInfoComponent,
    Page404Component,
    UserProfileComponent,
    NotificationsComponent,
    GeneralComponent,
    ReportComponent
  ],
// ...

and app-routing.module.ts

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: 'userProfile',
    component: UserProfileComponent
  },
  {
    path: 'general',
    component: GeneralComponent
  },
  {
    path: 'report',
    component: ReportComponent
  },
  {
    path: 'notifications',
    component: NotificationsComponent
  },
  {
    path: "department/:dep", loadChildren: () => import(`./branches/branches.module`).then(m => m.BranchesModule)},
  {
    path: 'aboutUs/rules',
    component: RulesComponent
  },
  {
    path: 'aboutUs/contactInfo',
    component: ContactInfoComponent
  },
  {
    path: 'membership/teacher',
    component: TeacherMembershipComponent
  },
  {
    path: 'membership/student',
    component: StudentMembershipComponent
  },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '**', component: Page404Component },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

the second level is branches that its modules are:

branches.module.ts:

@NgModule({
  declarations: [
    BranchesComponent,
    CoursesListComponent,
    TeachersListComponent,
    TeacherResumeComponent,
    TeacherSelectionFormComponent,
    Page404BranchesComponent
  ],
  imports: [
    CommonModule,
    BranchesRoutingModule,
    MaterialDesignModule
  ]
})
export class BranchesModule { }

and branches-routing.module.ts:

const routes: Routes = [
  { path: '', component: BranchesComponent, children: [
     {
      path: "coursesList/:branchCourses",
      component: CoursesListComponent
     },
    {
       path: "teacherSelection",
       component: TeacherSelectionFormComponent
    },
     {
      path: "teacherResume",
      component: TeacherResumeComponent
    },
      {
        path: 'coursesList', component: CoursesListComponent
      },
    {
      path: '', redirectTo: 'coursesList', pathMatch: 'full'
    },
    {
      path: '**', component: Page404BranchesComponent
    },
   ]}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

till here, when one of links (departments) in sidenav of app.component.html is clicked, the branches.component is loaded in place of route-outlet of app.component and subscribes the parameters passed from app.component, and lists branches respected to each link.

baranch.component.ts:

export class BranchesComponent implements OnInit {

  filteredBranches$!: Observable<Branch[]>;
  filteredBranches!: Branch[];

  constructor(private route: ActivatedRoute, private branchesService: BranchesService) {
  }

  activeTab: string=''
  ngOnInit(): void {
    this.route.paramMap.pipe(
      switchMap((params: Params) => {return this.branchesService.getDepBranches(params['get']('dep')) })
    ).subscribe((branches) => {this.filteredBranches = branches; this.activeTab=this.filteredBranches[0].name});
  }
}

and branch.component.html:

<nav mat-tab-nav-bar>
  <a mat-tab-link *ngFor="let br of filteredBranches"
     [routerLink]="['coursesList', br.code]"
     routerLinkActive="activeLink"
     (click)="activeTab = br.name"
     [active]="activeTab == br.name"> {{ br.name }} </a>
</nav>

<router-outlet></router-outlet>

but, although links of branches are listed in template of branches.component, no courses respect to each branches are shown by coursesList.component which placed in router-outlet of branches.component, because it does not received any route parameter from branch.component, until one of branch link is clicked.
I expect that upon branches links are shown at the same time branches.component is loaded, bellow of them, the courses of the first branch are listed by coursesList.component placed in router-outlet of branches.component.
Whereas no one of branch links is clicked and no parameter passed to coursesList.component, nothing is shown. Therefore, is there a solution to active the first branch link as defualt and pass its courses parameters to coursesList component upon branches.component is loaded? Best regards.