If your project was created by Ionic CLI and then imported into the Intel XDK, you may experience some build errors similar to the following:
An error occurred while building the application. Verify your build assets are correct and try again.
Build Log:
* Building a Cordova 5.1.1 application.
* The application name is "test"
* The package name is "xdk.test"
* Error: Plugin "Device" failed to install.
* Error: Plugin "Whitelist" failed to install.
* Plugin "cordova-plugin-console" (1.0.2) installed.
* Plugin "cordova-plugin-splashscreen" (2.1.0) installed.
* Plugin "cordova-plugin-statusbar" (2.0.0) installed.
* Plugin "ionic-plugin-keyboard" (1.0.7) installed.
Or, if your XDK project was configured to use CLI 4.1.2 (which is likely), you might see something like the following:
The build failed. An error occurred while building the application. Verify your build assets are correct and try again.
Build Log:
* The App ID is "xdk.test"
* The App Name is "test"
* Crosswalk Version: 14.43.343.17
* Plugin "org.apache.cordova.device" (0.2.13) installed.
* Plugin "org.apache.cordova.splashscreen" (0.3.5) installed.
* Plugin "com.rjfun.cordova.extension" (1.1.4) installed.
* Plugin "org.apache.cordova.geolocation" (0.3.11) installed.
* Plugin "org.apache.cordova.vibration" (0.3.12) installed.
* Plugin "com.google.playservices" (19.0.0) installed.
Ionic CLI is a shim that sits on top of Cordova CLI. Since Ionic CLI is Cordova CLI at the core, it adds Cordova plugins to your project using the copy of Cordova CLI it quietly installed on your system. It installs a version of Cordova CLI 5.x and creates a Cordova project that is compatible with Cordova CLI 5.x.
There are a few problems with the import for the Cordova CLI 5.x project into the Intel XDK:
- Ionic CLI assumes this is a Cordova CLI 5.x project
- Ionic CLI adds the Android-Cordova Whitelist plugin to your project
- The XDK may import your project as a CLI 4.1.2 project
- some of the plugin meta-files may be inconsistent due to differing versions of CLI
The solution to the problem is:
- import your Ionics CLI project
- expand the Intel XDK Plugin Management tool (on the Projects tab)
- remove the Whitelist plugin (the XDK handles this automatically), using the XDK plugin manager
- open the Build Settings section of the Projects tab
- change the CLI version to 5.1.1 (if it is set as 4.1.2)
- build your application (using the Build tab)
- remove and re-install any problem plugins (Device, in the CLI 5.1.1 build log above), using the XDK plugin manager
See this picture for a hint on how you remove the Whitelist plugin:
If the "Console" plugin was included in your project you can also remove that; it is primarily used to make console.log() messages work with the iOS simulator, which requires that you have a Mac and Xcode. The Intel XDK offers some alternative solutions that eliminate the need for that plugin.
For best results, on Android, use the Crosswalk build option, not the Android build option.
It doesn't hurt to remove and re-install ALL of the plugins, if you still experience problems. Do not re-install the whitelist plugin, the XDK handles this automatically as a function of your whitelist settings and target platform (in the Build Settings section of the Projects tab).
There are some Cordova preferences that were also set by the Ionics CLI project located in the config.xml file in your project. Those are not imported by the Intel XDK, but they can be transferred into the intelxdk.config.additions.xml file. For example, here's what a sample config.xml file might look like in an Ionics CLI project:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.test2696855" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>test</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="you@example.com" href="http://example.com.com/">
Your Name Here
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
</widget>
You can copy the <preference> tags from the config.xml file directly into the intelxdk.config.additions.xml file (note I have commented out the "android-minSdkVersion" preference tag, this is specified in the Build Settings section on the Projects tab) :
<!-- Change the debuggable preference to true to build a remote CDT debuggable app for -->
<!-- Crosswalk apps on Android 4.0+ devices and Cordova apps on Android 4.4+ devices. -->
<preference name="debuggable" value="false" />
<!-- IMPORTANT: set the debuggable preference to false before you build for the store! -->
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<!-- <preference name="android-minSdkVersion" value="16"/> -->
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
The icons and splash screens that were added into the "resources" directory will not be seen by the Intel XDK. In the current version of the Intel XDK (2807) those files must reside within the "www" directory (your source directory). In a future version they will be able to reside outside the "www" directory. The simplest thing to do is move that "resources" directory into your "www" directory and then use the Intel XDK Launch Icons and Splash Screens tool on the Projects tab to add them to your project.
If your project was created by Ionic CLI and then imported into the Intel XDK, you may experience some build errors similar to the following:
Or, if your XDK project was configured to use CLI 4.1.2 (which is likely), you might see something like the following:
Ionic CLI is a shim that sits on top of Cordova CLI. Since Ionic CLI is Cordova CLI at the core, it adds Cordova plugins to your project using the copy of Cordova CLI it quietly installed on your system. It installs a version of Cordova CLI 5.x and creates a Cordova project that is compatible with Cordova CLI 5.x.
There are a few problems with the import for the Cordova CLI 5.x project into the Intel XDK:
The solution to the problem is:
See this picture for a hint on how you remove the Whitelist plugin:
If the "Console" plugin was included in your project you can also remove that; it is primarily used to make console.log() messages work with the iOS simulator, which requires that you have a Mac and Xcode. The Intel XDK offers some alternative solutions that eliminate the need for that plugin.
For best results, on Android, use the Crosswalk build option, not the Android build option.
It doesn't hurt to remove and re-install ALL of the plugins, if you still experience problems. Do not re-install the whitelist plugin, the XDK handles this automatically as a function of your whitelist settings and target platform (in the Build Settings section of the Projects tab).
There are some Cordova preferences that were also set by the Ionics CLI project located in the config.xml file in your project. Those are not imported by the Intel XDK, but they can be transferred into the intelxdk.config.additions.xml file. For example, here's what a sample config.xml file might look like in an Ionics CLI project:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <widget id="com.ionicframework.test2696855" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>test</name> <description> An Ionic Framework and Cordova project. </description> <author email="you@example.com" href="http://example.com.com/"> Your Name Here </author> <content src="index.html"/> <access origin="*"/> <preference name="webviewbounce" value="false"/> <preference name="UIWebViewBounce" value="false"/> <preference name="DisallowOverscroll" value="true"/> <preference name="android-minSdkVersion" value="16"/> <preference name="BackupWebStorage" value="none"/> <preference name="SplashScreen" value="screen"/> <preference name="SplashScreenDelay" value="3000"/> <feature name="StatusBar"> <param name="ios-package" value="CDVStatusBar" onload="true"/> </feature> <platform name="android"> <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/> <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/> <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/> <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/> <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/> <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/> <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/> <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/> <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/> <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/> <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/> <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/> <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/> <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/> <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/> <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/> <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/> <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/> </platform> </widget>You can copy the <preference> tags from the config.xml file directly into the intelxdk.config.additions.xml file (note I have commented out the "android-minSdkVersion" preference tag, this is specified in the Build Settings section on the Projects tab) :
<!-- Change the debuggable preference to true to build a remote CDT debuggable app for --> <!-- Crosswalk apps on Android 4.0+ devices and Cordova apps on Android 4.4+ devices. --> <preference name="debuggable" value="false" /> <!-- IMPORTANT: set the debuggable preference to false before you build for the store! --> <preference name="webviewbounce" value="false"/> <preference name="UIWebViewBounce" value="false"/> <preference name="DisallowOverscroll" value="true"/> <!-- <preference name="android-minSdkVersion" value="16"/> --> <preference name="BackupWebStorage" value="none"/> <preference name="SplashScreen" value="screen"/> <preference name="SplashScreenDelay" value="3000"/> <feature name="StatusBar"> <param name="ios-package" value="CDVStatusBar" onload="true"/> </feature>The icons and splash screens that were added into the "resources" directory will not be seen by the Intel XDK. In the current version of the Intel XDK (2807) those files must reside within the "www" directory (your source directory). In a future version they will be able to reside outside the "www" directory. The simplest thing to do is move that "resources" directory into your "www" directory and then use the Intel XDK Launch Icons and Splash Screens tool on the Projects tab to add them to your project.