Cordova 的插件（屏幕方向/应用程序版本）不适用于 Ionic 5 / Angular 11
Posted
技术标签:
【中文标题】Cordova 的插件（屏幕方向/应用程序版本）不适用于 Ionic 5 / Angular 11【英文标题】：Cordova's plugins (screen-orientation / app-version) not working on Ionic 5 / Angular 11 【发布时间】：2021-08-17 03:04:57 【问题描述】：编辑 - TL DR；
我有两个插件 cordova-plugin-screen-orientation 和 cordova-plugin-app-version 无论如何都不能在我的应用程序上运行。该应用是在我的安卓物理设备上构建的。
我发现 cordova-plugin-ionic-webview 插件是导致此错误的原因。当我删除它时，两个插件都可以工作，但应用程序托管在“android:///file_assets/www/”上，我需要它在特定域上。
当我重新安装此插件时，该应用程序托管在正确的域中，但两个插件再次停止工作。
我正在努力解决一个关于 ionic 和 cordova 插件的特定问题。
我正在尝试按照以下 Ionic 的文档安装 cordova-plugin-screen-orientation 和 cordova-plugin-app-version：
https://ionicframework.com/docs/native/screen-orientation https://ionicframework.com/docs/native/app-version我的问题是这两个插件都已成功安装在我的项目下，但它们不起作用，也不会在 chrome 的 devTools 上发出任何警告/错误。
例如，我的代码确实调用了屏幕方向插件，并且我可以在切换纵向/横向方向时检测 onChange 事件（我正在使用物理 android 设备进行测试），但是我的 this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE) 函数需要什么都不做。这同样适用于unlock()
至于应用程序版本，当我调用this.appVersion.getAppName()（发生在所有函数中）时，承诺永远不会得到解决，给我任何答案。
这里是 ionic info（顺便说一下，我使用的是 npm 7.15.0）：
Ionic:
Ionic CLI : 6.14.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.8
@angular-devkit/build-angular : 0.1102.13
@angular-devkit/schematics : 11.2.13
@angular/cli : 11.2.13
@ionic/angular-toolkit : 3.1.1
Cordova:
Cordova CLI : 7.1.0
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-webview 5.0.0, (and 7 other plugins)
Utility:
cordova-res : 0.15.3
native-run : 1.3.0
System:
Android SDK Tools : 26.1.1 (/home/diego/Android/Sdk)
NodeJS : v14.17.0 (/usr/local/bin/node)
npm : 2.15.12
OS : Linux 5.3
这里是package.json：
"name": "myApp1",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts":
"ng": "ng",
"start": "ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt",
"lab": "ionic serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt --lab",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
,
"private": true,
"dependencies":
"@angular/cli": "^11.0.2",
"@angular/common": "^11.0.0",
"@angular/core": "^11.0.0",
"@angular/forms": "^11.0.0",
"@angular/platform-browser": "^11.0.0",
"@angular/platform-browser-dynamic": "^11.0.0",
"@angular/router": "^11.0.0",
"@ionic-native/action-sheet": "^5.26.0",
"@ionic-native/app-rate": "^5.33.0",
"@ionic-native/app-version": "^5.33.0",
"@ionic-native/core": "^5.33.0",
"@ionic-native/device": "^5.0.0",
"@ionic-native/ionic-webview": "^5.33.0",
"@ionic-native/launch-review": "^5.26.0",
"@ionic-native/native-storage": "^5.0.0",
"@ionic-native/screen-orientation": "^5.33.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic-native/user-agent": "^5.0.0",
"@ionic/angular": "^5.0.0",
"@ionic/cli": "^6.15.0",
"@ionic/lab": "^3.0.0",
"@ionic/storage-angular": "^3.0.6",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",
"add": "^2.0.6",
"cordova": "^9.0.0",
"cordova-android": "^8.1.0",
"cordova-ios": "^5.0.0",
"cordova-plugin-splashscreen": "^6.0.0",
"core-js": "^3.13.0",
"es6-promise-plugin": "^4.2.2",
"sw-toolbox": "^3.6.0",
"tslib": "^1.9.0",
"zone.js": "~0.11.4"
,
"devDependencies":
"@angular-devkit/architect": "^0.1102.4",
"@angular-devkit/build-angular": "^0.1102.4",
"@angular-devkit/core": "^11.0.0",
"@angular-devkit/schematics": "^11.0.0",
"@angular/compiler": "^11.0.0",
"@angular/compiler-cli": "^11.0.0",
"@angular/language-service": "~11.0.0",
"@ionic/angular-toolkit": "^3.0.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^15.0.3",
"angular2-template-loader": "^0.6.2",
"browser-sync": "^2.26.7",
"codecov": "^3.6.5",
"codelyzer": "^6.0.2",
"cordova-plugin-app-version": "^0.1.12",
"cordova-plugin-apprate": "^1.7.2",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-plugin-statusbar": "^2.4.3",
"html-loader": "^0.5.5",
"jest": "^24.1.0",
"null-loader": "^0.1.1",
"postcss": "^8.2.15",
"protractor": "~7.0.0",
"rxjs": "6.6.3",
"rxjs-compat": "^6.6.7",
"sonar-scanner": "^3.1.0",
"ts-loader": "^3.5.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.3",
"typescript": "~4.0.0",
"webpack": "^4.46.0"
,
"description": "An Ionic project",
"cordova":
"platforms": [
"ios",
"android"
],
"plugins":
"cordova-plugin-splashscreen": ,
"cordova-plugin-ionic-webview": ,
"cordova-plugin-nativestorage": ,
"cordova-plugin-statusbar": ,
"cordova-plugin-apprate":
"PLAY_CORE_VERSION": "1.+"
,
"cordova-plugin-screen-orientation": ,
"cordova-plugin-app-version":
这也是实际调用这些插件的代码：
login.module.ts
import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import IonicModule from '@ionic/angular';
import TranslateModule from '@ngx-translate/core';
import AppVersion from '@ionic-native/app-version/ngx';
import LoginPageRoutingModule from './login-routing.module';
import LoginPage from './login.page';
import HeaderPageModule from '../header/header.module';
import FooterPageModule from '../footer/footer.module';
import ScreenOrientation from '@ionic-native/screen-orientation/ngx';
@NgModule(
imports: [
CommonModule
,FormsModule
,TranslateModule
,ReactiveFormsModule
,IonicModule
,LoginPageRoutingModule
,HeaderPageModule
,FooterPageModule
],
declarations: [LoginPage],
providers: [
ScreenOrientation
,AppVersion
]
)
login.page.ts
import Component, OnInit from '@angular/core';
import Router from '@angular/router';
import AlertController, Platform from '@ionic/angular';
import ScreenOrientation from '@ionic-native/screen-orientation/ngx';
import AppVersion from '@ionic-native/app-version/ngx';
import TranslateService from '@ngx-translate/core';
import Alias from '../interfaces/metadata_project';
import LoadingUtility from '../utilities/loading-utility';
import Utilities from '../utilities/utilities';
import AppRateService from '../providers/apprate-service';
import LoginService from '../providers/login-service';
import SessionService from '../providers/session-service';
@Component(
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss']
)
export class LoginPage implements OnInit
//some variables....
constructor(
//...
private _screenOrientation: ScreenOrientation
,private _appVersion: AppVersion
//...
)
public async ngOnInit()
this._appVersion.getAppName().then(
(res) =>
console.log('ENTROU'); // Never gets called....
console.log(res);
).catch((err) =>
console.log(err); // Nothing here also...
);
this._screenOrientation.lock(this._screenOrientation.ORIENTATIONS.PORTRAIT).then(() =>
console.log('TRAVOU'); // Does get called, but I can still switch orientation...
).catch((err) =>
console.log(err); //Nothing here...
);;
到目前为止我所做的尝试：
-
删除node_modules/package_lock.json，和
npm install
一切都回来了，再加上ionic cordova platforms add android。
降级科尔多瓦 10 --> 9 / 8 / 7。
降级 Node.js 16 --> 14 / 12。
谁能解释一下这个问题？我目前不知道如何调试/检测任何安装问题。
【问题讨论】：
请在此处分享您的 git 存储库以检查并重现该问题。 你去：github.com/Diegomatosguedes/***-post 【参考方案1】：我已经通过从 Cordova 升级到 Capacitor v3 来解决我的问题。
事实证明，Capacitor 框架不需要“cordova-plugin-ionic-webview”插件，因此可以安全地将其从其架构中移除。而且由于是这个插件与其他两个不兼容，所以我的问题解决了。
此外，此插件的功能仍由 Capacitor 提供。
【讨论】：
以上是关于Cordova 的插件（屏幕方向/应用程序版本）不适用于 Ionic 5 / Angular 11的主要内容，如果未能解决你的问题，请参考以下文章
使用 Ionic / ngCordova 将相机/屏幕方向锁定为横向
在 Android 应用程序/Cordova 3.5 中设置屏幕方向
Cordova 3.5.0 中的 iPhone 屏幕方向没有改变
插件不支持该项目的 cordova-android 版本。 cordova-android：6.1.2，失败的版本要求：> = 6.3.0