angular - 使用 Angular 2 的 Cordova 应用程序

Question

我想使用 cordova 框架而不是 ionic。

到目前为止，

第 1 步:

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

第 2 步:

我已经创建了一个 cordova 应用程序并在其中集成了 angular 2 应用程序。

运行成功

第 3 步:

下一步是加载 cordova.js 文件

第 4 步:

在我的项目中添加 cordova 插件(如相机、设备分机)。

第 1 步和第 2 步已完成。

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

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

Answer 1

通过以下步骤获得输出，

1)创建了一个 Angular 项目

(可选)我正在使用 angular IDE创建 Angular 项目

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”并警告为找不到设备

要解决此问题，请添加行“declare 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)构建angular项目并将构建文件复制到cordova/www文件夹

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

8)准备并运行cordova项目。

就我而言，我在浏览器中运行了 cordova 项目并收到了一个值为“浏览器”的警报