现有的Angular 2 App和Cordova [英] Existing Angular 2 App and Cordova

问题描述

我进行了一些搜索，但似乎找不到我的问题的答案.

I have done some searching and can't seem to find an answer to my question.

我有一个现有的Angular 2应用程序.我可以使用Cordova为多个平台构建它吗?如果不是，是否有采取特殊步骤来实现这一目标?是否有任何实际文件说明该如何工作?

I have an existing Angular 2 application. Can I use Cordova to build it for multiple platforms? If not are there special steps to take to make this happen? Is there any actual documentation on how this works?

在建议我将其告知之前，我不希望与Ionic有任何关系.

Before it is suggested I'll make it known I want nothing to do with Ionic.

推荐答案

确定可以将cordova支持添加到现有的Angular2应用中.我还没有找到任何官方文档，但是有一些资源提供了一些有用的提示.

Sure you can add cordova support to your existing Angular2 app. I haven't found any official documentation but there are several resources that give some useful hints on how to.

请参见此处，此处和此处

基本步骤将是:

• 创建cordova项目:cordova创建myApp com.example MyApp
• 添加必要的平台:cordova平台添加myPlatform
• 将新的cordova项目中所有已创建的文件复制到现有的angular项目中，但 www文件夹和 package.json 文件
除外
• 将您的angular package.json与新的cordova ackage.json的内容合并.
• 更改现有的角度构建脚本以将dist文件输出到www文件夹，以便cordova可以找到最终的源文件.

• Create a cordova project: cordova create myApp com.example MyApp
• Add necessary platforms: cordova platform add myPlatform
• Copy all the created files from your new cordova project into your existing angular project except from: www folder and package.json file
• Merge your angular package.json with the contents of the new cordova ackage.json.
• Change your existing angular build script to output the dist files into the www folder so cordova can find the final source files.

到这里，您应该可以运行 cordova运行android/ios/browser ，并且您的应用程序应该可以运行了.如果您需要使用Cordova专用插件，则需要将此插件添加到您的 index.html

By here you should be able to run cordova run android/ios/browser and your app should work. If you need to use cordova specific plugins you will need to add this to your index.html

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

不用担心cordova版本会确保此文件存在于目标平台上.

Don't worry the cordova build will make sure this file exists on the target platform.

然后在 main.ts 或 index.ts 上添加检查以查看设备是否已准备就绪并引导您的角度应用程序.像这样:

Then on your main.ts or index.ts add a check to see if the device is ready and bootstrap your angular app. Something like this:

let bootstrap = () => {
    platformBrowserDynamic().bootstrapModule(AppModule);
}

if(window['cordova']){
    console.log("Cordova found")
    document.addEventListener('deviceready',bootstrap);
} else {
    console.log("Cordova not found")
    bootstrap()
}

希望它对某人有帮助.

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