Error while migrating from UIWebView to WKWebView for Cordova app

Recently we are trying to migrate the iOS apps (Angular + Cordova) to the WKWebView, however after adding the changes the app is stuck with a warning "[Warning] Unhandled Navigation Error: (cordova.js, line 1540)" the app works properly with the UIWebView and android. There is no stack trace available for the stack trace. Has anyone else faced this issue?

UPDATE: Please find additional details.

For the migration, I have followed instruction from Cordova

error screenshot:

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>CordovaApp</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <preference name="WKWebViewOnly" value="true" />
        <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
        <plugin name="cordova-plugin-inappbrowser" spec="^4.0.0" />
        <plugin name="cordova-plugin-wkwebview-engine" spec="^1.2.1" />
        <plugin name="cordova-plugin-device" spec="^2.0.3" />
        <plugin name="cordova-plugin-network-information" spec="^2.0.2" />
        <plugin name="cordova-plugin-geolocation" spec="^4.0.2" />
        <plugin name="cordova-plugin-camera" spec="^4.1.0" />
        <plugin name="cordova-plugin-ios-camera-permissions" spec="^1.2.0">
            <variable name="CAMERA_USAGE_DESCRIPTION" value="This app needs camera access" />
            <variable name="MICROPHONE_USAGE_DESCRIPTION" value="This app needs microphone access" />
            <variable name="PHOTOLIBRARY_ADD_USAGE_DESCRIPTION" value="This app needs write-access to photo library" />
            <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="This app needs read/write-access photo library access" />
        </plugin>
        <plugin name="cordova-plugin-file-transfer" spec="^1.7.1" />
        <plugin name="cordova-plugin-wkwebview-file-xhr" spec="^2.1.4" />
        <feature name="CDVWKWebViewEngine">
            <param name="ios-package" value="CDVWKWebViewEngine" />
        </feature>
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AboutusComponent } from './aboutus/aboutus.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './auth.guard';
import { DefaultComponent } from './default/default.component';
import { ErrorComponent } from './error/error.component';
import { HomeComponent } from './home/home.component';
import { HttpService } from './services/http.service';
import { KeycloakService } from './services/keycloak.service';
import { TokenInterceptor } from './services/token.interceptor';
export function kcFactory(keycloakService: KeycloakService) {
  return () => keycloakService.init();
}
@NgModule({
  declarations: [AppComponent, HomeComponent, AboutusComponent, ErrorComponent, DefaultComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule],
  providers: [
    HttpService,
    AuthGuard,
    {
      provide: APP_INITIALIZER,
      useFactory: kcFactory,
      deps: [KeycloakService],
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CONCERT_URLS as URLS } from './constants/urls';
import { HttpService } from './services/http.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  public title = 'Ang';

  constructor(private httpService: HttpService, private router: Router) {}
  ngOnInit() {
    this.getAccountDetails();
  }

  getAccountDetails() {
    const allAccounts = this.httpService
      .getData(URLS.ACCOUNT.GET.byPageAndSize(), true, {})
      .subscribe((accountDetails: any) => {
        console.log(accountDetails);
        this.router.navigate(['home']);
      });
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { AuthGuard } from './auth.guard';
import { DefaultComponent } from './default/default.component';
import { ErrorComponent } from './error/error.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'aboutus',
    component: AboutusComponent,
  },

  {
    path: 'default',
    component: DefaultComponent,
  },
  {
    path: '',
    redirectTo: 'default',
    pathMatch: 'full',
  },
  {
    path: '**',
    component: ErrorComponent,
  },
];

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

NOTE: the app is working normally on Android platform and as a web application with this same codebase.