使用Angular 2的Cordova应用程序

Question

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

至今,

步骤1:

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

第2步:

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

它运行成功.

第3步:

下一步是加载cordova.js文件

第4步:

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

第1步和第2步完成.

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

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

Answer 1

通过以下步骤获得输出,

1)创建了一个角度项目

(可选)我使用角度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)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)构建角度项目并将构建文件复制到cordova/www文件夹中

我正在使用脚本将文件从angular项目复制到cordova.这里的教程

8)准备并运行cordova项目.

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

Answer 2

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

1. 编辑 main.ts 使其看起来像这样：

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

   }; document.addEventListener("deviceready", onDeviceReady, false);

2. 对于任何插件（例如相机）：在顶部声明 let navigator: any;

   使用: navigator.camera.getPicture(成功, 失败, { 质量: 80 }); 。

3. 在 Angular 项目的 index.html 中添加以下脚本。

   <script type="application/javascript" src="cordova.js"></script>
   注意：MIME 类型应该是“application/javascript”而不是“text/javascript”。

4. 使用命令构建项目

   ng build --base-href 。--prod --output-path ./Aditya/www/ 注意：这里 Aditya 是 cordova 项目的名称

5. 现在编辑 Cordova 项目的 Aditya/www/ 文件夹中的 index.html 文件，以包含所有脚本的 MIME。

   类型=“应用程序/javascript”

6. 现在你可以走了。