Visual Studio 2017 Cordova Ionic2 环境搭建

Visual Studio 2017 + Ionic2 Templates for Visual Studio 2017 + Visual Studio Emulator for Android

安装 Visual Studio 2017

参见使用 Apache Cordova 工具开发混合应用程序

安装 Node.js

参见Node.js

安装 NPM Task Runner

这里搜索 NPM Task Runner 下载最新版安装

安装 Ionic2 Templates for Visual Studio 2017

这里搜索 Ionic2 Templates for Visual Studio 2017 下载最新版安装

创建 Ionic2 项目

安装好之后在TypeScript的移动应用下将会多出3个Ionic2的项目模板,根据需要选择对应的模板创建即可

创建成功之后需要等待解决方案管理器下的依赖项全部还原成功才可以运行,还原进度受GFW影响较大


错误排除

npm 包 @ionic/app-scripts 未安装

错误内容:
1、解决方案资源管理器中提示:@ionic/app-scripts未安装

2、还原失败时控制台输出:

1
Cannot download "https://github.com/sass/node-sass/releases/download/v4.5.0/win32-x64-..._binding.node"

3、有时候在已经安装了NPM Task Runner和Ionic2 Templates for Visual Studio 2017的情况下依然提示需要安装NPM Task Runner和Ionic2 Templates for Visual Studio 2017也可能是由于@ionic/app-scripts安装不完整所致

解决方案:
根据提示中的下载路径,将文件下载到本地
创建名为 SASS_BINARY_PATH 的系统环境变量,将环境变量的值设置为本地文件路径

保存环境变量设置之后重启Visual Studio再次尝试还原@ionic/app-scripts
其实,@ionic/app-scripts无法在线安装的原因主要是由于依赖项node-sass无法在线安装引起的


Build 时下载 Gradle 超时

错误内容:

1
Exception in thread "main" java.lang.RuntimeException: Timeout of 120000 reached waiting for exclusive access to file: .../gradle-2.13-all.zip

解决方案:
Gradle 下载对应的文件放到提示的路径,并将路径下的其他文件删除之后重新生成


Visual Studio Emulator for Android 无法启动

错误内容:
错误日志中提示如下内容:
Code: HypervisorNotRunning (13)

解决方案:
在 CMD 中以管理员权限执行以下内容后重启:

1
bcdedit /set hypervisorlaunchtype auto

Visual Studio Emulator for Android 无法联网

错误内容:
Visual Studio Emulator for Android中无法打开WIFI

解决方案:
先在 Visual Studio Emulator for Android 中启动一次Visual Stuido安装的模拟器(需要在安装时勾选,如果没有勾选,也可以在此界面选择合适的模拟器进行安装之后启动),待启动之后关闭模拟器

这样会在 网络和共享中心 创建一个名为 Windows Phone Emulator Internal Switch 的虚拟交换机

打开 Hyper-V 管理器 在右侧的操作中找到 虚拟交换机管理器 创建一个 外部 虚拟交换机

再次回到 Hyper-V 管理器 右键需要联网的虚拟机 设置 在设置窗口中选择 添加硬件 添加一个 网络适配器 将刚才创建的 外部虚拟交换机 作为虚拟交换机并保存

之后启动 Visual Studio Emulator for Android 之后就会连接到Internet

参考

Getting started with Ionic 2 apps in Visual Studio 2017
Visual Studio Emulator for Android 系统要求
适用于 Android 的 Visual Studio 仿真程序疑难解答