У меня есть проблема в открытии меню в ionic 4

---

Я создал меню с помощью ionic 4, оно будет работать нормально, но когда я войду в свое приложение или веб-сайт, оно не откроется, для его открытия мне нужно обновить весь браузер. Может быть, это проблема CORS, но я не могу отключить CORS, так как все мои данные поступают из ASP.net webapi так что же мне делать, чтобы перепродать эту ошибку?
******************************************************************************************
Мой app.componenet.html код

<ion-app>
  <ion-split-pane>
    <ion-menu side="start" type="overlay" class="left-menu">
      <ion-header class="head">
        <div class="enappd-header">

          <ion-avatar slot="start" class="profile" style="margin-right: auto;">
            <img src="../assets/pp.jpg"> 
            <!-- <img [src]="imgSrc"> -->
          </ion-avatar>
        </div>

      </ion-header>

      <ion-content class="app-back" scroll-y="true">
      
        <ion-list class="list-padd ion-no-margin ion-no-padding">
          <ion-list-header>
            <ion-label></ion-label>
          </ion-list-header>
          <div *ngFor="let p of beginner">
            <div *ngIf="p.children && !p.module">
              <ion-item detail (click)="expandMenu(p.title)">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{ p.title }}
                </ion-label>
              </ion-item>
              <div class="zero-h" [ngClass]="{'animate-expand': (showChildren == p.title)}">
                <ion-menu-toggle auto-hide="false" *ngFor="let option of p.children">
                  <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"
                    (click)="redirectPage(option.url, option.disabled)">
                    <ion-icon slot="start" [name]="option.icon"></ion-icon>
                    <ion-label>
                      {{ option.title }}
                    </ion-label>
                  </ion-item>
                </ion-menu-toggle>
              </div>
            </div>
            <div *ngIf="p.children && p.module=='sidemenu'">
              <ion-item detail (click)="expandMenu(p.title)">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{ p.title }}
                </ion-label>
              </ion-item>

              <div *ngIf="showChildren == p.title">
                <div class="option_menu-button" *ngFor="let option of p.children;let i = index">
                  <ion-menu-button autoHide="false" menu="end">
                    <ion-item (click)="showSidemenu(i)" class="ion-padding-start" [routerLink]="[option.url]" detail>
                      <ion-icon slot="start" [name]="option.icon"></ion-icon>
                      <ion-label>
                        {{ option.title }}
                      </ion-label>
                    </ion-item>
                  </ion-menu-button>
                </div>
              </div>
            </div>

            <div *ngIf="!p.children">
              <ion-menu-toggle auto-hide="false">
                <ion-item [routerLink]="[p.url]" detail>
                  <ion-icon slot="start" [name]="p.icon"></ion-icon>
                  <ion-label>
                    {{ p.title }}
                  </ion-label>
                </ion-item>
              </ion-menu-toggle>
            </div>
          </div>

          <ion-item detail (click)="logout()" class="ion-margin-top">
            <ion-icon slot="start" name="person"></ion-icon>
            <ion-label>
              Logout
            </ion-label>
          </ion-item>
        </ion-list>
        <ion-list class="list-padd ion-no-margin ion-no-padding">
          <ion-list-header>
            <ion-label></ion-label>
          </ion-list-header>

          <div *ngFor="let p of startup">
            <div *ngIf="p.children && !p.module">
              <ion-item detail (click)="expandMenu(p.title)">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{ p.title }}
                </ion-label>
              </ion-item>

              <div class="zero-h" [ngClass]="{'animate-expand': (showChildren == p.title)}">
                <ion-menu-toggle auto-hide="false" *ngFor="let option of p.children">
                  <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"
                    (click)="redirectPage(option.url, option.disabled)">
                    <ion-icon slot="start" [name]="option.icon"></ion-icon>
                    <ion-label>
                      {{ option.title }}
                    </ion-label>
                  </ion-item>
                </ion-menu-toggle>
              </div>
            </div>

            <div *ngIf="p.children && p.module=='sidemenu'">
              <ion-item detail (click)="expandMenu(p.title)">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{ p.title }}
                </ion-label>
              </ion-item>

              <div *ngIf="showChildren == p.title">
                <div class="option_menu-button" *ngFor="let option of p.children;let i = index">
                  <ion-menu-button autoHide="false" menu="end">
                    <ion-item (click)="showSidemenu(i)" class="ion-padding-start" [routerLink]="[option.url]" detail>
                      <ion-icon slot="start" [name]="option.icon"></ion-icon>
                      <ion-label>
                        {{ option.title }}
                      </ion-label>
                    </ion-item>
                  </ion-menu-button>
                </div>
              </div>
            </div>

            <div *ngIf="!p.children">
              <ion-menu-toggle auto-hide="false">
                <ion-item [routerLink]="[p.url]" detail>
                  <ion-icon slot="start" [name]="p.icon"></ion-icon>
                  <ion-label>
                    {{ p.title }}
                  </ion-label>
                </ion-item>
              </ion-menu-toggle>
            </div>
          </div>
        </ion-list>

        <ion-list class="list-padd ion-no-margin ion-no-padding">
          <ion-list-header>
            <ion-label></ion-label>
          </ion-list-header>
          <div *ngFor="let p of pro">
            <div *ngIf="p.children && !p.module">
              <ion-item detail (click)="expandMenu(p.title)">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{ p.title }}
                </ion-label>
              </ion-item>

              <div *ngIf="showChildren == p.title">
                <ion-menu-toggle class="ion-menu-toggle" auto-hide="false" *ngFor="let option of p.children">
                  <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"
                    (click)="redirectPage(option.url, option.disabled)">
                    <ion-icon slot="start" [name]="option.icon"></ion-icon>
                    <ion-label class="menu-label">
                      {{ option.title }} <ion-icon *ngIf="option.device" name="phone-portrait" color="primary">
                      </ion-icon>
                      <ion-icon *ngIf="option.apple" name="logo-apple" color="primary"></ion-icon>
                    </ion-label>
                  </ion-item>
                </ion-menu-toggle>
              </div>
            </div>
            
            <div *ngIf="!p.children">
              <div auto-hide="false">
                <ion-item detail [routerLink]="[p.url]">
                  <ion-icon slot="start" [name]="p.icon"></ion-icon>
                  <ion-label>
                    {{ p.title }}
                  </ion-label>
                </ion-item>
              </div>
            </div>
          </div>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

****************************************************************************************
Вот мой код app.component.ts

import { Component, ViewChildren,QueryList, OnDestroy } from '@angular/core';
import {Platform, ModalController, MenuController , AlertController, IonRouterOutlet } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { UtilService } from './services/util/util.service';
import { Router } from '@angular/router';
import { AuthenticationService } from './services/firestore/firebase-authentication.service';
import { User } from '../app/models/auth.model';
import { AuthService } from './services/auth/auth.service';

import { ToastController } from '@ionic/angular';
import { Plugins } from '@capacitor/core';
const { Toast } = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnDestroy  {
  sidemenu = 1;
  showChildren = '';

  backButtonSubscription;
  @ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;

  lastTimeBackPress = 0;
  timePeriodToExit = 2000;


  public beginner = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'Profile',
      url: '/profile',
      icon: 'person'
    },
    {
      title: 'Wallet',
      url: '/wallet',
      icon: 'wallet'
    },
    {
      title: 'Notification',
      url: '',
      icon: 'notifications'
    },
    {
      title: 'Help Center',
      url: '/helpcenter',
      icon: 'help-circle'
    },
    {
      title: 'Legal',
      url: '/legal',
      icon: 'today'
    },
    {
      title: 'Refer a Friend',
      url: '',
      icon: 'contacts'
    },
    /* {
      title: 'Video',
      url: '/video',
      icon: ''
    }, */

  ];

  public startup = [

  ];

  public pro = [

  ];


  imgSrc: string;
  selectedImage: any = null;
  isSubmitted: boolean;
  isUpdateDateError : boolean = false;
  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
  user: User;
  em: any;
  fnm: any;
  lnm: any;
  mob: any;
  gn: any;

  constructor(
    private authservices: AuthService,
    private authService: AuthenticationService,
     private util: UtilService,
      private route: Router,
       private platform: Platform,
     private splashScreen: SplashScreen,
      private statusBar: StatusBar,
       public modalCtrl: ModalController,
       private menuCtrl: MenuController,
       
       public alertController: AlertController,
       public router: Router,
       ) 
    {
    this.initializeApp();
    }

  ngOnInit() {    
    this.authservices.getUserClaims().subscribe((res: any) => {      
    this.em = res.Email;
    this.fnm = res.FirstName;
    this.lnm = res.LastName;
    this.gn = res.Gender;
    this.mob = res.MobileNo;
    this.imgSrc = res.Profile_Path;   
  }); 
}

  logout() {
    console.log('logout item');
    this.authService.logout().then(() => {
      this.util.navigate('login', false);
    })
  }
  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      // this.splashScreen.hide();
      this.backButtonEvent();
      this.splashScreen.hide();
    });
  }
  backButtonEvent() {
    this.backButtonSubscription = this.platform.backButton.subscribe(async () => {
      this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
        if (outlet && outlet.canGoBack()) {
          outlet.pop();
        } else if (this.router.url === "/home") {
          // this.presentAlertConfirm();
          if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
            navigator['app'].exitApp();
          } else {
            this.showToast('Press back again to exit App.');
            this.lastTimeBackPress = new Date().getTime();
          }
        }
      });
    });
  }


  async showToast(msg) {
    await Toast.show({
      text: msg
    });
  }

  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'Confirm!',
      message: 'Confirm to Exit App !!!',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Exit',
          handler: () => {
            console.log('Confirm Okay');
            navigator["app"].exitApp();
          }
        }
      ]
    });
    await alert.present();
  }


  //Called when view is left
  ngOnDestroy() {
    // Unregister the custom back button action for this page
    this.backButtonSubscription.unsubscribe();
  }


  showSidemenu(index) {
    this.sidemenu = index + 1;
  }

  expandMenu(title) {
    if (this.showChildren === title) {
      this.showChildren = '';
    } else {
      this.showChildren = title;
    }
  }


  async redirectPage(pageUrl, disabled) {
    if (disabled) {
      return
    }
    if (pageUrl === '/logout') {
      this.logout();
    } else if (pageUrl === '/product-details') {
      this.route.navigate([pageUrl, { id: 65 }]);
    } else {
      this.route.navigate([pageUrl])
    }
  }
  async proRedirect(pageUrl) {
    this.route.navigate([pageUrl])
    this.menuCtrl.toggle();
  }

}

****************************************************************************************
Пожалуйста, кто-нибудь дайте мне решение для того же самого.
Заранее спасибо.!

Что я уже пробовал:

Я пробовал разные коды для меню, но ничего не получалось.

---