使用Angular 2的Cordova应用程序 [英] Cordova application using Angular 2

问题描述

我想使用cordova框架代替离子型.

到目前为止，

第1步:

我创建了一个angular 2应用程序.

第2步:

我已经创建了cordova应用程序，并在其中集成了angular 2应用程序.

运行成功.

第3步:

下一步是在加载时加载cordova.js文件

第4步:

在我的项目中添加cordova插件(例如camera，设备扩展).

第1步和第2步完成.

请帮助我完成第3步和第4步.

当我呼叫插件时，它会引发如下错误，

解决方案

通过以下步骤获得输出，

1)创建了一个有角度的项目

(可选)我正在使用角度IDE 创建角度项目

2)在angular项目html文件中添加了对cordova.js文件引用的引用.

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

3)创建一个cordova项目

4)向cordova项目添加了平台和插件.

对于我来说，我添加了浏览器平台和cordova设备插件.

5)在Angular项目中实现了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)Typescript不能重新区分' device.platform '并警告找不到设备

要解决此问题，请添加行"声明无功设备； "

添加以上内容后，我的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文件夹

我正在使用脚本将文件从角度项目复制到cordova. 此处的教程

8)准备并运行cordova项目.

对于我的情况，我在浏览器中运行了cordova项目，并收到了值为浏览器"的警报

Instead of ionic I would like to use cordova framework.

So far,

Step 1:

I have created an angular 2 application.

Step 2:

I have created an cordova application and integrated angular 2 application in it.

Its running successfully.

Step 3:

Next step is to load cordova.js file on load

Step 4:

Add cordova plugin(like camera , device ext) in my project.

Step 1 and 2 completed.

Please help me out to complete step 3 and step 4.

When I call plugin its throws an error as follows,

解决方案

Got an output with following steps,

1)Created an angular project

(Optional)I am using the angular IDE to create angular project

2)Added reference to cordova.js file reference in angular project html file.

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

3)Create an cordova project

4)Added platform and plugin to the cordova project.

for my case I added browser platform and cordova device plugin.

5)In angular project implemented OnIt and added the plugin callback function as follow.

Note: It is important to call cordova plugin after 'onDeviceReady'

    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)Typescript does not recogonise 'device.platform' and warns as cannot find device

To resolve this issue add the line 'declare var device;'

After adding the above my AppComponent.ts file looks like follows,

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)Build the angular project and copy the build files into cordova /www folder

I am using the script to copy file from angular project to cordova. Tutorial here

8)Prepare and run the cordova project.

for my case I ran the cordova project in browser and got an alert with value 'Browser'

这篇关于使用Angular 2的Cordova应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！