科尔多瓦应用使用Angular 2

而不是离子我想用科尔多瓦框架。科尔多瓦应用使用Angular 2

到目前为止，

步骤1：

我已创建的角2的应用程序。

步骤2：

我已经创建了一个应用科尔多瓦并在它集成角2的应用程序。

它运行成功。

步骤3：

下一步是上加载负载cordova.js文件

步骤4：

添加科尔多瓦插件（如照相机，装置EXT）在我的项目。

第1步和第2步完成。

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

当我打电话插件其如下抛出一个错误，

来源

2017-06-03 Amir john

得到具有以下步骤的输出，

1）创建的角项目

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

2）添加参考cordova.js文件在角度项目html文件中引用。

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

3）创建科尔多瓦项目

4）新增平台和插件到科尔多瓦项目。

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

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

注：调用科尔多瓦插件是非常重要的后 '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）打字稿不recogonise“设备。平台“并警告如找不到设备

要解决此问题，添加行” 申报无功装置;'

后加入以上我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）建立角项目和构建文件复制到科尔多瓦/ WWW文件夹

我现在用的是脚本将文件从角度项目复制到科尔多瓦。 Tutorial here

8）准备并运行cordova项目。

对于我来说，我跑在浏览器中的科尔多瓦项目，并得到了与价值“浏览器”的警报

来源

2017-06-06 18:28:58

你有没有尝试过与https://github.com/mapsplugin/cordova-plugin-googlemaps？花了3天时间，仍然无法理解'plugin'是什么。如果你能帮助我，我会给你大量的赞许。 – Chrillewoodz

哪里应该创建科尔多瓦项目（点数3），你的意思是在角项目？ – sibi

分别创建cordova项目 –

当你调用插件 - 你还等onDeviceReady火？

来源

2017-06-05 10:09:27 MStoner

嗨MStoner，到目前为止我还没有等待ondevice准备好，我会尝试一下并让你知道。 –

我试过，但得到相同的问题 –

得到了与此解决方案的输出https://stackoverflow.com/a/44397322/3600674 –

这不是一个官方的解决办法，但你可以用onDeviceReady事件监听器上maint.ts引导你的角度2,4，然后所有当事件被触发时，你的应用程序将运行。例如：

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

来源

2017-09-28 07:40:11

科尔多瓦应用使用Angular 2

回答

相关问题