Question

而不是离子我想使用cordova框架。

到目前为止，

第1步：

我创建了一个角度2应用程序。

第2步：

我已经创建了一个cordova应用程序并集成了角度2应用程序。

它成功运行。

第3步：

下一步是在加载

上加载cordova.js文件

第4步：

在我的项目中添加cordova插件（如相机，设备分机）。

完成第1步和第2步。

请帮我完成第3步和第4步。

当我调用插件时，它会抛出如下错误，

Answer 1

通过以下步骤获得输出

1）创建一个角度项目

（可选）我正在使用angular IDE创建角项目

2）在angular project html文件中添加了对cordova.js文件引用的引用。

<script type="text/javascript" src="cordova.js"></script>

3）创建一个cordova项目

4）为cordova项目添加了平台和插件。

对于我的情况，我添加了浏览器平台和cordova设备插件。

5）在角色项目中实现了OnIt并添加了插件回调函数，如下所示。

注意：在“ onDeviceReady ”之后调用cordova插件非常重要

    import { Component , OnInit} from '@angular/core';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit{

    ngOnInit() {
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
           alert(device.platform);
        }
    }

    }

6）打字稿不会识别' device.platform '并警告无法找到设备

要解决此问题，请添加“声明var device; ”

行

添加上面的AppComponent.ts文件后，如下所示，

import { Component , OnInit} from '@angular/core';

declare var device;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

ngOnInit() {
    document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
           alert(device.platform);
        }
}

}

7）构建角度项目并将构建文件复制到cordova / www文件夹

我正在使用脚本将文件从angular项目复制到cordova。 Tutorial here

8）准备并运行cordova项目。

对于我的情况，我在浏览器中运行了cordova项目并获得了值为'Browser'的警报

Answer 2

你什么时候打电话给插件 - 你在等待onDeviceReady开火吗？

Answer 3

它不是官方解决方案，但你可以使用on maint.ts上的onDeviceReady事件监听器来引导你的角度2,4，然后你的所有应用程序都会在事件被触发时运行。例如：

 document.addEventListener("deviceready", () => {
  platformBrowserDynamic().bootstrapModule(AppModule);
 }, false);

Answer 4

要在敏捷项目中添加任何Cordova插件，

编辑main.ts如下所示：

如果（环境生产）{ enableProdMode（）; } 让onDeviceReady =（）=> { platformBrowserDynamic（） .bootstrapModule（AppModule） .catch（err => console.error（err））;

}; document.addEventListener（“ deviceready”，onDeviceReady，false）;
对于任何插件（例如Camera）：在上面，声明let navigator：any;

使用： navigator.camera.getPicture（成功，失败，{质量：80}）；
在angular项目的index.html中添加以下脚本。

<script type="application/javascript" src="cordova.js"></script>
注意：MIME类型应该是“ application / javascript”，而不是“ text / javascript”。
使用命令构建项目

ng build --base-href。 --prod --output-path ./Aditya/www/ 注意：这里的Aditya是Cordova项目的名称
现在将Cordova项目的Aditya / www /文件夹中的index.html文件编辑为为所有包含的脚本包括MIME。

type =“ application / javascript”
现在你很好。

使用Angular 2的Cordova应用程序

4 个答案: