Cordova ios error building Images.xcassets

Question

I've spent a lot of time trying to work this out to no avail.

I udpated cordova and since el capitan my mac now has issues with NPM and cordova.

I got it to install but I have to use sudo for cordova now.

I tried the following:

sudo cordova platform remove ios
sudo cordova platform add ios
sudo cordova build ios

And this gives me the following output:

** BUILD FAILED **


The following build commands failed:
    CompileAssetCatalog build/emulator/<AppName>.app <AppName>/Images.xcassets
(1 failure)
ERROR building one of the platforms: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/MacUserName/Desktop/<AppName>/<AppName>/platforms/ios/cordova/build-debug.xcconfig,-project,<AppName>.xcodeproj,ARCHS=i386,-target,<AppName>,-configuration,Debug,-sdk,iphonesimulator,build,VALID_ARCHS=i386,CONFIGURATION_BUILD_DIR=/Users/MacUserName/Desktop/<AppName>/<AppName>/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/MacUserName/Desktop/<AppName>/<AppName>/platforms/ios/build/sharedpch
You may not have the required environment or OS to build this project
Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/MacUserName/Desktop/<AppName>/<AppName>/platforms/ios/cordova/build-debug.xcconfig,-project,<AppName>.xcodeproj,ARCHS=i386,-target,<AppName>,-configuration,Debug,-sdk,iphonesimulator,build,VALID_ARCHS=i386,CONFIGURATION_BUILD_DIR=/Users/MacUserName/Desktop/<AppName>/<AppName>/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/MacUserName/Desktop/<AppName>/<AppName>/platforms/ios/build/sharedpch

Cordova version

sudo cordova -v
6.0.0

Update: I'm now running 6.1.1, still the same issue

Cordova iOS platform version

sudo cordova platform ios -v
6.1.1

Mac Version: 10.11.3
XCode Version:7.2.1

Answer 1

I managed to fix this issue by:

• removing any icon or splash screen references in the config.xml file;
• put a splash.png and/or icon.png files in the www/resources folder of your cordova project; then,
• run the ionic cordova resources --icon or ionic cordova resources --splash command

this will create all the correct splash/icon files for you and add them to the config.xml file. That warning then goes away.

Hope this works!

Answer 2

I would recommend using the cordova-icon and cordova-splash npm packages. This is because you can just put two images in your root, then the commands will work out the rest for you. They are written by cordova, and you can install using:

npm install -g cordova-icon
npm install -g cordova-splash

Then just put a 1024x1024 version of your logo as "icon.png" in the project root. And:

"The splash screen image should be 2208x2208 px with a center square of about 1200x1200 px. The image may be cropped around the center square."

https://www.npmjs.com/package/cordova-splash

Just put an image matching that description in the project root as "splash.png"

Remove any lines in config.xml that specify the images to use for ios, cordova-icon/splash will automatically put them in the correct place with the right names so that xcode will recognize them.

Once you've got that setup, just execute these commands:

cordova platform remove ios
cordova platform add ios
cordova-icon
cordova-splash

Then run your build command. For me it is:

cordova build ios --build-config

But you may not have a build config, or need additional params. If the build fails (make sure you run the command even if you think it will fail - it will set things up) just open the generated workspace in platforms/ios in xcode, clean the project, and build. That should work.

Answer 3

1. Rename Platform/ios
2. on terminal type: cordova platform add ios
3. cordova build ios.

worked at my case

Answer 4

For a solo icon.png file, the image must be 1024x1024 to get working with a solo <icon src="icon.png"/> in the config.xml.

I have to this with cordova-cli 6.5.0, cordova-ios 4.5.1 and xcodebuild 9.0.

Answer 5

I got this error when I was using cordova-icon but my icon.png image was not square.

Changing the icon.png to a square image and re-doing cordova-icon meant that cordova build ios now works for me.

Answer 6

Ths simple solution that I have tried is to add the correct size of the image 1024x1024

   <platform name="ios">
        <icon src="res/icon-1024.png" />
    </platform>

Answer 7

After digging into cordova_lib I think it's clear (to me) that cordova is not supposed to resize the icon for you but only copy them if they exist and have the right dimensions.

See this code in cordova-lib\src\cordova\metadata\ios_parser.js:

// See https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LaunchImages.html
// for launch images sizes reference.
var platformIcons = [
    {dest: 'icon-60.png', width: 60, height: 60},
    {dest: '[email protected]', width: 120, height: 120},
    {dest: '[email protected]', width: 180, height: 180},
    {dest: 'icon-76.png', width: 76, height: 76},
    {dest: '[email protected]', width: 152, height: 152},
    {dest: 'icon-small.png', width: 29, height: 29},
    {dest: '[email protected]', width: 58, height: 58},
    {dest: 'icon-40.png', width: 40, height: 40},
    {dest: '[email protected]', width: 80, height: 80},
    {dest: 'icon.png', width: 57, height: 57},
    {dest: '[email protected]', width: 114, height: 114},
    {dest: 'icon-72.png', width: 72, height: 72},
    {dest: '[email protected]', width: 144, height: 144},
    {dest: 'icon-50.png', width: 50, height: 50},
    {dest: '[email protected]', width: 100, height: 100}
];

var destIconsFolder, destSplashFolder;
var xcassetsExists = folderExists(path.join(platformRoot, 'Images.xcassets/'));

if (xcassetsExists) {
    destIconsFolder = 'Images.xcassets/AppIcon.appiconset/';
} else {
    destIconsFolder = 'Resources/icons/';
}

platformIcons.forEach(function (item) {
    var icon = icons.getBySize(item.width, item.height) || icons.getDefault();
    if (icon){
        var src = path.join(appRoot, icon.src),
            dest = path.join(platformRoot, destIconsFolder, item.dest);
        events.emit('verbose', 'Copying icon from ' + src + ' to ' + dest);
        shell.cp('-f', src, dest);
    }
});

The best option seems to be using a plugin which does the resizing for you with hooks. Check out Generating iOS and Android icons in Cordova / PhoneGap or https://github.com/disusered/cordova-icon-gm for a new more futureproof version of the same plugin (hooks in directories are deprecated in 6.x).

Answer 8

I managed to solve this issue by removing the non-storyboard splash references in config.xml, the newest version of cordova seems to be only using the storyboard ones:

So removed:

    <splash src="res/ios/splash/Default~iphone.png" width="320" height="480"/>
    <splash src="res/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/ios/splash/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/ios/splash/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/ios/splash/Default-667h.png" width="750" height="1334"/>
    <splash src="res/ios/splash/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/ios/splash/Default-Landscape-736h.png" width="2208" height="1242"/>

And kept only these:

        <splash src="res/ios/splash/Default@2x~iphone~anyany.png" />
        <splash src="res/ios/splash/Default@2x~iphone~comany.png" />
        <splash src="res/ios/splash/Default@2x~iphone~comcom.png" />
        <splash src="res/ios/splash/Default@3x~iphone~anyany.png" />
        <splash src="res/ios/splash/Default@3x~iphone~anycom.png" />
        <splash src="res/ios/splash/Default@3x~iphone~comany.png" />
        <splash src="res/ios/splash/Default@2x~ipad~anyany.png" />
        <splash src="res/ios/splash/Default@2x~ipad~comany.png" />

Answer 9

This is not a difficult error.Only thing has to do is remove all lines with

Images.xcastsets

from

platform/ios/.xcodeproject

Then remove platform ionic cordova platform rm ios, Add platform again and build.

ionic cordova platform add ios

ionic cordova build ios

Answer 10

I had the same problem as the OP and whilst the accepted answer was correct and helpful there is now an updated (and maintained) resource generator on npm called cordova-res, which replaces cordova-icon and cordova-splash. Also, the required splash screen dimensions have increased. All the details you need are on the npmjs cordova-res page, from which I have taken the following info.

Install with:

npm install -g cordova-res 

You'll need your icon.png and splash.png (the website says JPEG or PNG) images ready. These need to have the following dimensions:

icon.(png|jpg) must be at least 1024 × 1024px

splash.(png|jpg) must be at least 2732 × 2732px (note the increased size)

Just a little side note about the splash screen. Your image needs to be in the centre of the splash screen so that different rectangular device sized images are generated without cropping your splash screen image. As the accepted answer says, the size of this centre image needs to be about 1200 x 1200px.

Place these images in a resources folder in your project:

resources/
├── icon.png
└── splash.png

Before you generate the resources it might be worth removing and adding your ios platform (and others if you're building them too) to start with a clean platform folder. I don't know for sure if this is necessary.

cordova platform remove ios
cordova platform add ios

Run the following to generate the resources:

$ cordova-res

Then you can build your platform:

cordova build ios

Now all should be OK and hopefully resolved your xcassets error, as it did for me.