带有cordova插件的Angular 2答案

【问题标题】：Angular 2 with cordova plugins带有cordova插件的Angular 2
【发布时间】：2018-12-17 05:35:44
【问题描述】：

我正在使用 Angular 2 与 cordova 构建一个混合应用程序。我不使用 Ionic，所以请不要参考它。我在浏览器和手机上都使用相同的 Angular 代码。我在包含cordova项目的Angular应用程序中放置了一个文件夹，当我调用cordova run android来构建Angular应用程序并将其输出到www文件夹时，我使用了一个钩子脚本。所有这一切都完美无缺，应用程序构建成功，一切正常，但是当我尝试使用插件时，问题就来了。

我的 index.html 看起来像这样：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <title>Servizio Feste</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script type=”text/javascript” src=”cordova.js”></script>
</head>
<body>
  <ngx-app></ngx-app>
  <style>
    .spinner { /* styles */ }
    .global-spinner { /* styles */ }
  </style>
  <div id="nb-global-spinner" class="global-spinner">
    <div class="spinner"></div>
  </div>
</body>
</html>

还有我的 main.ts：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

我安装了 phonegap 条码扫描器插件，并尝试在组件中使用它，如下所示：

import { AppToasterService } from './../../../../services/toaster.service';
import { Component } from '@angular/core';

declare var cordova: any;

@Component({
  selector: 'qrcode',
  templateUrl: './qrcode.component.html'
})
export class QRCodeComponent {

  constructor(
    private toasterService: AppToasterService
  ) { }

  scanQRCode() {
    cordova.plugins.barcodeScanner.scan(result => {
      this.toasterService.success(result);
    }, error => this.toasterService.error('Error'));
  }

}

当我尝试调用 scanQRCode() 方法时，会弹出以下错误：

ReferenceError: cordova is not defined

我搜索了很多关于 stackoverflow 中已经存在的问题，但每个人都提到了

 declare var cordova: any;

或在 index.html 中加载 cordova.js 脚本，但我已经做了这些事情。其他一些人说要在 .angular-cli.json 的“脚本”部分导入 cordova.js，但我也尝试过这个，它给了我一个编译错误，说没有找到 cordova.js。我还尝试等待 main.ts 中的“deviceready”事件来引导应用程序，但该事件永远不会触发！有人可以帮我吗？提前谢谢你。

【问题讨论】：

我认为您需要为调用barcodeScanner.scan 创建接口.ts 文件 文件。您遇到编译时错误或运行时错误？
我没有收到任何编译错误。当我尝试在运行时使用 scanQRCode() 函数时发生错误。
我没有尝试使用ionic，因为我没有时间了解如何编写钩子函数来使用已经编写的代码，因为Ionic会自己编译typescript

标签： angular cordova cordova-plugins

【解决方案1】：

这是最愚蠢的事情：我从网站复制了 html 脚本标签，而引号以不同的方式编码。它是 src="cordova.js"，而不是 src="cordova.js"。

【讨论】：