Question

我正在使用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”事件来引导应用程序，但是该事件永远不会触发！有人可以帮我吗？我先谢谢你。

Answer 1

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

Angular 2与Cordova插件

1 个答案: