Angular Cordova应用程序从UIWebView迁移到WKWebView时出错
最近,我们正在尝试将iOS应用程序(Angular+Cordova)迁移到WKWebView,但是在添加 更改应用程序被困在警告中“[警告]未处理的导航错误:(cordova.js,第1540行)” 该应用程序可以与UIWebView和android正常工作。 没有可用于堆栈跟踪的堆栈跟踪。还有其他人面临过这个问题吗 更新:请查找其他详细信息 对于迁移,我遵循了 错误屏幕截图: config.xml app.component.ts app-routing.module.tsAngular Cordova应用程序从UIWebView迁移到WKWebView时出错,angular,cordova,wkwebview,Angular,Cordova,Wkwebview,最近,我们正在尝试将iOS应用程序(Angular+Cordova)迁移到WKWebView,但是在添加 更改应用程序被困在警告中“[警告]未处理的导航错误:(cordova.js,第1540行)” 该应用程序可以与UIWebView和android正常工作。 没有可用于堆栈跟踪的堆栈跟踪。还有其他人面临过这个问题吗 更新:请查找其他详细信息 对于迁移,我遵循了 错误屏幕截图: config.xml app.component.ts app-routing.module.ts 注意:该应用程序
注意:该应用程序在Android平台上正常工作,并且作为一个具有相同代码库的web应用程序。有多种原因可能导致您遇到此问题。我建议您提供配置xml、顶级应用程序模块和应用程序组件代码,并详细描述升级过程。@DevMike我已经添加了详细信息并更新了问题。
<?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>
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 {}
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']);
});
}
}
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 {}