在 Angular 2 + Cordova 应用中使用 Cordova 插件

Question

我有一个Angular 2应用程序，我正在将其构建为cordova并部署到Android/IOS。我没有使用ionic，我看到了许多使用ionic的解决方案，但现在我无法将整个项目转换为ionic。

到目前为止，一切都运行良好，除了我无法弄清楚如何使用cordova插件。具体来说，我正在尝试使用“cordova-plugin-file”在设备上存储本地文件。

我无法弄清楚如何导入/访问插件文件或函数？也许我忽略了cordova插件的工作方式中的某些东西。大多数教程只显示如何使用插件添加的功能，例如...

window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {
   console.log('file system open: ' + fs.name);
   createFile(fs.root, "newTempFile.txt", false);
}, onErrorLoadFs);

然而，上述代码会破坏 Angular 2，我会收到类似于这样的错误信息。

 Property 'requestFileSystem' does not exist on type 'Window'.

很明显，某些内容未被正确导入或引用。这很可能是因为Cordova是Angular 2应用程序的子文件夹，我运行ng build并将输出文件放到Cordova文件夹中，所以此时它不知道Cordova存在？

 Angular_2_project
 ├── cordova
 │   └── plugins
 ├── src
 │   └── index.html
 │   └── app
 │        └── html/ts files 

- Andrew Barta

---

cordova.js 是否已加载？ - Parth Ghiya

是的..!! 这是唯一的选项。如果它是 Angular CLI 项目，则添加到 angular-cli.json 中。这是导致您出错的原因。 - Parth Ghiya

这是一个Angular CLI项目。您是否将cordova.js添加到“app”：[{“scripts”：[“path/to/script/cordova.js”]...并且我只需要cordova.js还是插件文件？ - Andrew Barta

太棒了，谢谢！这样就清楚多了。我今天下午会测试一下并汇报结果。 - Andrew Barta

当然可以 :) 请查看答案。 - Parth Ghiya

Answer 1

看起来 cordova.js 没有被加载。

添加 cordova.js 和插件相关的 .js 文件。

如果是 angular-cli.json，只需在脚本中加载它们。

当您将其添加到 *.ts 文件中时，尝试构建时会抛出错误。 为避免此问题，请在 *.ts 文件的开头加上 declare。

例如： 我想在我的 ts 文件中使用 cordova.on。

我只需要写：

declare var cordova:any 

- Parth Ghiya

---

谢谢，那个起作用了！不过在浏览器中运行会有一些问题，这是可以预料的。对于那些 Cordova 插件启用 TypeScript 也是很好的，但这是另一个问题了。 - Andrew Barta

欢迎您。请告诉我有哪些问题。肯定会有问题，因为Angular 2和Cordova的组合确实非常奇怪。 - Parth Ghiya

大家好，Andrew Barta和Parth Ghiya，我遇到了同样的问题，我正在添加设备插件。我声明了device: any; 但是在浏览器中运行时，它会抛出“找不到设备”的异常。请给我一些解决方案或分享一些教程供我参考。 - Amir

也许需要发布更多详细信息。与浏览器相关的许多 Cordova 相关功能都无法正常工作，至少需要一些强制措施，尝试部署到设备上，看看错误是否消失。 - Andrew Barta