Ionic3.9.2 导入 Cordova 的运行时错误

Question

我正在尝试为我的 Ionic 项目使用 cordova-plugin-inappbrowser，但是当我安装了所有依赖项并运行"ionic serve"时，似乎是这样的

Error: Cannot find module "."
at webpackMissingModule (http://localhost:8100/build/vendor.js:95121:70)
at Object.get (http://localhost:8100/build/vendor.js:95121:148)
at Object.module.exports.obj (http://localhost:8100/build/vendor.js:173422:29)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.298 (http://localhost:8100/build/main.js:192:66)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.294 (http://localhost:8100/build/main.js:46:67)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.448 (http://localhost:8100/build/main.js:335:75)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)

这是我的包.json

{
"name": "ionicdemo2",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@ionic-native/core": "3.12.1",
"@ionic-native/splash-screen": "3.12.1",
"@ionic-native/status-bar": "3.12.1",
"@ionic/storage": "2.0.1",
"child_process": "^1.0.2",
"cordova": "^7.0.1",
"cordova-android": "^6.2.3",
"cordova-ios": "^4.4.0",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-inappbrowser": "^1.7.1",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.2",
"cordova-plugin-whitelist": "^1.3.1",
"ionic-angular": "3.6.0",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"unorm": "^1.4.1",
"xcode": "^0.9.3",
"zone.js": "0.8.12"
},
"devDependencies": {
"@ionic/app-scripts": "2.1.3",
"@ionic/cli-plugin-ionic-angular": "1.0.0-rc.2",
"typescript": "2.3.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-inappbrowser": {},
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {}
},
"platforms": [
"android",
"ios"
]
}
}

和我的配置.xml

······
<plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
<plugin name="cordova-plugin-whitelist" spec="1.3.1" />
<plugin name="cordova-plugin-console" spec="1.0.5" />
<plugin name="cordova-plugin-statusbar" spec="2.2.2" />
<plugin name="cordova-plugin-device" spec="1.1.4" />
<plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
<plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
<engine name="ios" spec="~4.4.0" />
<engine name="android" spec="~6.2.3" />
</widget>

和我的xx.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { cordova } from 'cordova';
@Component({
selector: 'page-try',
templateUrl: 'try.html'
})
export class TryPage {
constructor(public navCtrl: NavController) {
cordova.InAppBrowser.open('http://www.someweb.com', '_blank', 
'location=yes')     
}
}

">

离子服务"对我来说效果很好，我尝试"npm install --save "。 问题还是!! 请帮忙！谢谢

Answer 1

导入 cordova 不是在 ionic 中使用 cordova 插件的正确方法。您必须为要使用的插件安装ionic本机包装器。请参阅 InAppBrowser 插件的 ionics 文档。

如果您想使用尚未可用的包装器的插件，您可以执行以下操作： 在文件顶部(例如，导入下方的某个位置(，您可以添加：

declare var NameOfTheJsModule

您可以在插件plugin.xml的name属性下找到 js-module 的名称：

<js-module src="www/inappbrowser.js" name="inappbrowser">
...
</js-module>

所以在这种情况下：

delcare var inappbrowser;

并使用它，例如：

this.inappbrowser.show();

无论如何，我强烈建议使用离子原生注射剂，因为它们使用起来更方便，因为它们为每个插件提供了一个通用接口(响应回调包装在承诺或可观察量中(，例如确保触发 Angulars 更改检测。此外，您还可以获得代码完成，这也非常有用。