Question

我试图在我的Ionic项目中使用cordova-plugin-inappbrowser，但是当我安装了所有依赖项并运行＆＃34; ionic serve＆＃34;时，它似乎就是这样

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)

这是我的package.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"
    ]
  }
}

和我的config.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')     
  }

}

＆＃34;离子服务＆＃34;对我来说工作正常，我试着＆＃34; npm install --save。＆＃34; 问题还是!!! 请帮忙！ THKS

Answer 1

导入cordova不是在离子中使用cordova-plugins的正确方法。您必须为要使用的插件安装离子原生包装器。有关InAppBrowser插件，请参阅ionics documentation。

如果你想使用一个尚未提供包装的插件，你可以按如下方式进行：在文件顶部（例如导入下方的某处），您可以添加：

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变更检测。此外，您还可以获得代码完成功能。

使用cordova导入的ionic3.9.2运行时错误

1 个答案: