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

Answer 1

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

worked at my case

Answer 2

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 3

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 4

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: 'icon-60@2x.png', width: 120, height: 120},
    {dest: 'icon-60@3x.png', width: 180, height: 180},
    {dest: 'icon-76.png', width: 76, height: 76},
    {dest: 'icon-76@2x.png', width: 152, height: 152},
    {dest: 'icon-small.png', width: 29, height: 29},
    {dest: 'icon-small@2x.png', width: 58, height: 58},
    {dest: 'icon-40.png', width: 40, height: 40},
    {dest: 'icon-40@2x.png', width: 80, height: 80},
    {dest: 'icon.png', width: 57, height: 57},
    {dest: 'icon@2x.png', width: 114, height: 114},
    {dest: 'icon-72.png', width: 72, height: 72},
    {dest: 'icon-72@2x.png', width: 144, height: 144},
    {dest: 'icon-50.png', width: 50, height: 50},
    {dest: 'icon-50@2x.png', 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 5

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 6

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