child route not loading inittially in angular

Question

I have some child routes within a main route I want a default child route to be loaded initially when i click on the main route I am using angular and electron. The child route does get loaded at first but the problem is the child menu doesn't show the active link and form validation doesn't work. but once i click on the child menu it starts working properly or if i click on the main menu twice it works. so the problem seems to be the child route not loading properly the first time. this is my app routing module.

       const routes: Routes = [
      { path: '',pathMatch: 'full', redirectTo: '/incomes' },
      { path: 'incomes', component: IncomesComponent},
      { path: 'incomelist',component: IncomeListComponent},
      { path: 'expenses', component: ExpensesComponent, children:[
        {path : '', pathMatch: 'full', redirectTo: 'service'},
        {path: 'service', component: ServiceExpenseComponent},
        {path: 'salary', component: SalaryExpenseComponent},
        {path: 'other', component: OtherExpenseComponent}
      ]},
      { path: 'reports', component: ReportsComponent }
    
    
    ];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is the expense component where the links for the child routes are located.

<div class="ui fluid three item menu pointing" dir="rtl">
    <a class="item" routerLink="service"  [routerLinkActive]="['active','orange']">خدماتی</a>
    <a class="item" routerLink="salary"  [routerLinkActive]="['active','orange']" >معاشات</a>
    <a class="item"  routerLink="other" [routerLinkActive]="['active','orange']">دیگر</a>
  </div>
  <div class="ui segment">
    <router-outlet></router-outlet>
  </div>

this is the main sidebar.

<div class="ui visible inverted right vertical sidebar thin menu" style="width: 180px;" dir="rtl">
  <div class="item">
    <div class=" header">عواید</div>
    <div class="menu">
      <a class="ui  item" routerLink="incomes" >عاید جدید</a>
      <a class="ui  item" routerLink="incomelist">لیست عواید </a>
    </div>
  </div>
  <div class="item">
    <div class=" header">مصارف</div>
    <div class="menu">
      <a class="ui  item" routerLink="expenses" >مصرف جدید</a>
    </div>
  </div>
    
  </div>

I have tried lazy loading also but there was also the same problem. i just can't find the problem. EDIT: I am also adding the service_expense html and ts in case it's needed.

<form class="ui form" dir="rtl" [formGroup]="serviceForm" (ngSubmit)="ngOnAddOrUpdate()">
    <div class="ui large header center" style="text-align: center;"> فورم رسید مصرف خدماتی جدید</div>
    <p></p><p></p>
      
      <div class="required field">
        <label>نوع خدمت</label>
        <select formControlName="service_type">
          <option value="">نوع خدمت</option>
          <option *ngFor="let v of income_types" [value]="v">{{ v }} </option>
        </select>
      </div>
      <div class="required field">
        <label>نمبر مسلسل</label>
        <input type="number"  placeholder="نمبر مسلسل" formControlName="service_id">
      </div>
      <div class="required field">
        <label>مقدار پول</label>
        <input type="number"  placeholder="مقدار پول" formControlName="amount">
      </div>
      <div class="field">
        <label>ملاحظات</label>
        <input type="number"  placeholder="ملاحظات" formControlName="expense_description">
      </div>
      <div class="required field">
        <label>تاریخ رسید</label>
        <input type="date"  formControlName="given_date">
      </div>
      <div class="required field">
        <label>دریافت کننده</label>
        <select formControlName="receiver">
          <option value="">دریافت کننده</option>
          <option *ngFor="let k of receiver_list" [value]="k.id">{{ k.name }} </option>
        </select>
      </div>
      <button class="positive ui button" type="submit" [disabled]="!serviceForm.valid">ذخیره</button>
    </form>

The service-expense ts file.

export class ServiceExpenseComponent implements OnInit {
  serviceForm: FormGroup;
  income_types;
  receiver_list;
  constructor(private mainService: MainService) {
    
    this.income_types = this.mainService.getIncomeTypes();
    this.receiver_list = this.mainService.getShareHolders();

   }

  ngOnInit(): void {
    this.serviceForm = new FormGroup({
      service_type: new FormControl('',Validators.required),
      service_id: new FormControl('',Validators.required),
      amount: new FormControl('',Validators.required),
      expense_description: new FormControl(''),
      given_date: new FormControl('',Validators.required),
      received_by: new FormControl('',Validators.required)
    });

  }
  ngOnAddOrUpdate(){
    console.log(this.serviceForm.value);
    console.log(this.serviceForm.valid);
  }
}

EDIT2: Console log

(electron) Security Warning: webFrame.executeJavaScript was called without worldSafeExecuteJavaScript enabled. This is considered unsafe. worldSafeExecuteJavaScript will be enabled by default in Electron 12.
Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
main.e265e149dcdc1172b723.js:1 ERROR TypeError: Cannot read property 'validator' of null
    at Mm (main.e265e149dcdc1172b723.js:1)
    at t.addControl (main.e265e149dcdc1172b723.js:1)
    at t._setUpControl (main.e265e149dcdc1172b723.js:1)
    at t.ngOnChanges (main.e265e149dcdc1172b723.js:1)
    at t.Ne (main.e265e149dcdc1172b723.js:1)
    at Ln (main.e265e149dcdc1172b723.js:1)
    at Nn (main.e265e149dcdc1172b723.js:1)
    at Fn (main.e265e149dcdc1172b723.js:1)
    at Qi (main.e265e149dcdc1172b723.js:1)
    at Zi (main.e265e149dcdc1172b723.js:1)
{service_type: "", service_id: "", amount: "", expense_description: "", given_date: "", …}
main.e265e149dcdc1172b723.js:1 false

I have the same error in another component as well but it works fine.

Answer 1

try this

<div class="ui fluid three item menu pointing" dir="rtl">
    <a class="item" [routerLink]="['/expenses/','service']" [routerLinkActive]="['active','orange']">خدماتی</a>
    <a class="item" [routerLink]="['/expenses/','salary']" [routerLinkActive]="['active','orange']">معاشات</a>
    <a class="item" [routerLink]="['/expenses/','other']" [routerLinkActive]="['active','orange']">دیگر</a>
</div>
<div class="ui segment">
    <router-outlet></router-outlet>
</div>

main sidebar.

<div class="ui visible inverted right vertical sidebar thin menu" style="width: 180px;" dir="rtl">
<div class="item">
  <div class=" header">عواید</div>
  <div class="menu">
    <a class="ui  item" [routerLink]="['/incomes']" >عاید جدید</a>
    <a class="ui  item" [routerLink]="['/incomelist']">لیست عواید </a>
  </div>
</div>
<div class="item">
  <div class=" header">مصارف</div>
  <div class="menu">
    <a class="ui  item" [routerLink]="['/expenses']" >مصرف جدید</a>
  </div>
</div>
  
</div>