Ionic-cli: ionic resources does NOT update old icon

Created on 14 May 2015  Â·  173Comments  Â·  Source: ionic-team/ionic-cli

_From @sclearion on May 13, 2015 20:29_

ionic resources does not work as documented. It keeps loading from "cache". how can i remove this stupid caching as it is driving the graphic designers crazy. I have followed docs to a T and the only way I can update the icon is by removing android platform and re-installing.

_Copied from original issue: driftyco/ionic#3723_

Most helpful comment

So annoying that's true, an option like ionic resources --clean-cache needed. What @ehlerskon says works for me.

All 173 comments

@cesarvega Before the resources server knows to use the images cache or not, it does a checksum on the source image. If the checksum of the source image is the same then it'll pull the image from the cache, if not, I'll it'll upload a new image again. Are you replacing the source image each time?

@cesarvega - I'm trying this right now with latest (1.4.0). If I change my icon/splashscreen colors and run the resources command, it recreates the images. If I try to use the old ones, it relies on caching.

What is your use case here? Are you trying to fetch those resources for another machine by re-running the resources command?

Nope it's the same machine. I update (change colors, bevel, gradients) the icon with GIMP, run the resources tool and see that it does not pull from cache...GREAT. Afterwards when I search the platform/ and resources/ folders for the new icon.png, the old one is still there and the new one only gets added to the drawable folder.

Anyways, I created a D script that would remove all stale icon and splash images from platform/ and resources/ and then it runs 'ionic resources'. Works great for now.

Thanks for the help and feedback

I just really want to know if there is a simple 'no-cache' option. I can deal with the images not updating.

I think I understand the problem more.

Are you meaning the images that are copied over to the platforms?

Have you tried just running ionic platform rm ios && ionic platform add ios? That would have it copy over the files in the meantime.

rm -rf resources/ios
rm -rf resources/android

ionic resources

...it still still uses cached images...

where are these cached images... I would like to remove them so this operates correctly

My hack method: Search resources/android for .png's in file browser (im on Ubuntu) then manually delete all old icons/splash you see. THEN run ionic resources. Works great for now. WHY would you cache images on a development platform when they are most likely going to be updated VERY frequently. Other than that, I LOVE THIS FRAMEWORK.

On Mac, "ionic resources --icon" generates the icons but these don't get picked up Xcode. As a result, the app still shows ionic icon and splash. It works for android (using Windows).

After "ionic resources --icon" I get a bunch of png files in $appdir/resources/ios/icon/ that are current; I also see in $appdir/config.xml the icon tags for platform name="ios". How do I get them into Xcode and into my app? Thanks.

Hi, on Windows you can clean system temp files with ccleaner tool and ionic resources generates new splash and icons for your app.

Sorry for my english, i am from Chile.

Caching resources has been really an annoying feature since I've been using Ionic. Please please and please kindly remove this feature.

Today, sth. really annoying happened:
One of the screen.png of Androids' resources was corrupted, which caused an error when building the apk.

Because of the server-side cache / checksum-check, i always got the corrupted images when running ionic resources, although I deleted the resources/ios and resources/android folder.

Editing the source-file (to change its checksum) solved the problem…

An option to ignore / delete the cache when running ionic resources would be great…

So annoying that's true, an option like ionic resources --clean-cache needed. What @ehlerskon says works for me.

Me,too,same problem

Thks @ehlerskon

And +1 for --clean-cache option :)

Same problem on Mac!

Edit: I have solved by placing the "icon.png" in the resources folder. (I have placed it on the project's root folder).

+1 for --clean-cache option

I have solved running the command "ionic prepare ios"

So, is there an option available to ignore cache?

+1 - how was this overlooked? rm platform ios is not a solution.

This is driving crazy.. we need some switch to remove cache.

I'm having this same issue. I'm not sure what to do right now since I'm trying to release my app to the App Store and the dang icon is looking crazy! hahaha This is insane.

Do you already tried the following command:

ionic prepare ios
Em 16/11/2015 16:00, "Adrian Boisclair" [email protected] escreveu:

I'm having this same issue. I'm not sure what to do right now since I'm
trying to release my app to the App Store and the dang icon is looking
crazy! hahaha This is insane.

—
Reply to this email directly or view it on GitHub
https://github.com/driftyco/ionic-cli/issues/420#issuecomment-157120336.

Hey guys, I recommend you try this, go 'C:\Users\AppData\Local\Temp ' this temp directory, and delete the cache files , then try again .

Easy Trick : Create a new blank project, add your splash & icon.psd in /resources, execute sudo ionic resources then copy all news generated files in your current project ;) Quick & easy :)
<3 Ionic

+1 for --clean-cache option

+1 for --clean-cache option

A tedious method is check the tmp folder (/tmp) after run the ionic resources. There you will find the images generated by the command. After this I think you can replace them in the resources folder according the sizes. This works on Ubuntu 14.04 and should work in OSX too.

@allucardster Nothing in /tmp on OSX.

@troyanskiy, in OSX, do cd $TMPDIR & find . -regex '.*\/<folder name>\/.*\.png' where is the name of the folder where your ionic application is.
Edit: I'm not 100% sure of this one, I did it successfully with the psd files so I'm not having the problem anymore.

I found a new way @troyanskiy, just run:

1 - ionic prepare android
2 - ionic prepare ios
3 - ionic resources

That should update the splash and icons by each platform in resources folder

+1 for --clean-cache option

@tseho that works! thanks!
@allucardster solution of @tseho work for me, thank you.

And this is STILL not fixed

on mac, I use 'opensnoop' to monitor the file access and find the cache file. Then I delete the folder and everything is working good now.

In Linux, rm /tmp/*.png and it works. "cache" in this case is solution looking for a problem and is a dumb idea unless you're still running on your '286 machine.

I have this problem running on Ubuntu
$ ionic resources
Ionic icon and splash screen resources generator
uploading icon.png...
uploading splash.png...

BUT it does not generate anything!

any idea?

@mok89 do you have internet connection on your ubuntu machine? It uses server to resize the icons.

@troyanskiy REALLY thanks, was the PROXY.
The command would be

PROXY=http://proxy:port ionic resources

I deleted all images within the resources/android/icon, resources/android/splash, resources/ios/icon, resources/ios/splash folders, then ran ionic resources --icon && ionic resources --splash. The regular ionic resources did not work.

It fathoms me why they haven't fixed this yet. This is useless/broken functionality. Why would you cache constantly changing resources in a development environment especially when those resources are not generated, designed or controlled by ionic.

Who told ionic to cache resources that I, the developer, have not deemed or need cacheable; by that logic they may as well cache my angular.js files too. If ionic is caching something that is not valid, then doesn't that warrant a critical "bug".

Its been almost 2 years now!!!!

@sclearion Resources are cached on your computer, so you can delete them.
I think Ionic team has more urgent bugs to fix, so they don't have time to fix that.
Happy new year!!!

Well...
For new year preset I've fixed that bug and created 2 pull requests.

  1. https://github.com/driftyco/ionic-cli/pull/708
  2. https://github.com/driftyco/ionic-app-lib/pull/55
    I have added parameter to ignore cached files: --ignore-cache or -c

So, hope Ionic team will merge my pool request and that fix will included into the next release.

Happy New Year!!!

Thanks @troyanskiy so glad you fixed this. I just manually patched my current node_modules with your fixes. Worked like a charm!

Please accept the pull request. This bug is unbelievably annoying.

+1

+1

+1

Quick Work Around:
go to /usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/resources.js and set cacheImages: false

+1

Thanks for the workaround @shox that worked for me.

Hey thanks for hanging in there everyone, will be taking a look at @troyanskiy's PR this week!

Thanks @troyanskiy please get the PR in @tlancina and let us know. @shox workaround did not work for me.

@shox workaround is good for me but it would be good to get a flag on the command to clear the cache

So the fix for this looks fine, but I'm having trouble understanding when the cached assets are incorrect (apart from when the files in tmp get corrupted). If the source image changes, then the cache is not used.

What is the scenario where the source image has not changed, but the cached images should not be used? I'm just trying to determine if there is a bug here in how the cache is invalidated.

@tlancina
It's hard to reproduce the bug, but sometimes it's really annoying.
For example I have one project for 10 brands. And each brand have an icon and a splash screen.
So I'm building 10 apps by replacing the assets and inapp configuration. So some times I have the same icon in other project.

@troyanskiy ah thanks, so to be clear, you're saying if you have project A and project B, sometimes project B will incorrectly use the cached images from project A?

@tlancina - Same issue for me the splash image got corrupted (i can see it 50% rendered, rest 50% as white space) for iOS and not for Android. Now its taking the same image from cache. No help stuck. So, now looks like every time you we do resources we need to manually check each icon and splash generated :)

I only got one project and when I change the splash.psd and run ionic resources --splash the old image is still beeing used. No new images are generated in my resources/android/splash folder. Tried it just now.

EDIT: I am sorry, as my PSD had a size of 32MB the upload and processing failed. It works.

@tlancina yes
Sorry for long answer.

@troyanskiy no worries, I'd still like to fix the underlying issues of corrupted images and having the cache be incorrect. As inconvenient as it is, opening the gates and allowing people to potentially bypass the cache every time is something I'm hesitant to do.

In the same way that many people use sudo in front of every npm command, if people start running resources with -c every time it would really start hammering the resources server (resizing large images takes a bit of work and is not free).

So to recap, the main issue here is the case when the cached images (which are stored locally in whatever os.tmpDir() returns) get corrupted somehow (network issues from resource server maybe?). It's hard for me to narrow down exactly what the other issues are or how to reproduce them, so any further clarification would be greatly appreciated. Thanks everyone for your patience!

@tlancina Is it possible to make that resizing on the computer (offline)? For example can use imagemagick or gm lib for node.js. Yes, it will bring more complexity for the users, that they will have to install imagemagic or graphic magic on there's computer.

Or... Better... The resources script can check is imagemagick or graphicmagick is installed on the computer, then it will resize the images locally.

Or... Other solution.
S1. When the user will call ionic resources it creates some.json file in the resources directory with checksum of files and send them to server to resize.
S2. Next time when user will call ionic resources it will check if the new checksum is the same or not and than if it same it will take images from the cache, otherwise S1.

Great Ideas. Thought of the same.

troyanskiy schrieb:

@tlancina https://github.com/tlancina Is it possible to make that
resizing on the computer (offline). For example can use imagemagick or
gm lib for node.js. Yes it will bring more complexity for the users,
that they will have to install imagemagic or graphic magic on there's
computer.

Or... Better... The resources script can check is imagemagick or
graphicmagick is installed on the computer, then it will resize the
images locally.

Or... Other solution.
S1. When the user will call |ionic resources| it creates some.json
file in the resources directory with checksum of files and send them
to server to resize.
S2. Next time when user will call |ionic resources| it will check if
the new checksum is the same or not and than if it same it will take
images from the cache, otherwise S1.

—
Reply to this email directly or view it on GitHub
https://github.com/driftyco/ionic-cli/issues/420#issuecomment-190799001.

@troyanskiy interesting idea about doing it offline. I believe this was looked into originally, but was decided against because of the challenges in making sure it works across all platforms vs. only on the server.

I wonder if the happy medium is to make it so the cached files are easily purged by the user (not hard to find), but not so easily done that people will be automating their build to do it or running -c every time. If in the meantime we moved the cached resources to $HOME/.ionic would that be an acceptable step in the right direction? The cache could then be manually cleaned more easily than it is today.

I don't have a good sense of how often this issue happens, but this is assuming that it's fairly rare. And if it's not, then we should fix the underlying issue!

i had the same problem. i think the right solution at this moment for this problem is to modify the image a bit so that the size increases/decreases. (Probably change the quality of the image or something.)

After that if you do "ionic resources" it will generate new icons and splash for you without referring to the old cache.

@tlancina I also thoughts about that solution.
So, to conclude I think the solution to change os.tmpDir() is good and maybe it will be much better if users could define there's tmp directory by adding kind of "tmp": "/tmp/ionic" to package.json or ionic.project files.
And by default tmp directory should be os.tmpDir() + "/ionic"
What do you think?

Fixed this problem by clearing the cache and deleting the temp files

@c4chetann I cant tell you how many times people have suggested that. Ive been watching this issue for years now. That does not work. Tried it anyway just in case and FAIL

@sclearion in my case, it works perfect.

I got the same problem with ionic resources --- from cache error i read all the above comment but i did n't got luck
when i use @shox and @troyanskiy method it give me the response bellow

Ionic icon and splash screen resources generator
  uploading icon.png...
  uploading splash.psd...

I am using ionic 1.7.14 on windows 10 with internet connection and i am not using any proxy

when i see on the network it try to upload the resource file to res.ionic.io but noting returned

@Misikir make sure your psd file size is lower, I had the same issue and later found the psd file was 10mb+; when I use a low res PSD of below 5mb it worked with no issues, strange but it worked.

try it out!

Than you @appplumbr for your help. i found the problem that it was my IP. Ionic website blocking me out by CloudFlare server and asking requests from my pc to inter captcha. when you i try to connect with the ionic server from CLI it was returning html from ClourFlare and ionic CLI does't recognize the return type

I changed the size of an icon to include more whitespace, resaved the icon in resources/ios/icons.png. Then it refused to regenerate images, always taking them from cache. Used one of the workarounds described above to get around it. If the cache image wouldn't do mistakes it wouldn't be irritating, but when it does it's really really annoying.

Another use case that seems problematic is when I change from Orientation "portrait" to "default" (or "landscape") in config.xml. How to get ionic resources to update config.xml with the new resources required and generate the images?

i'm on windows 7, use @mok89 's method that working for me without add behide ionic resouces. it should be proxy issue for sure.

set PROXY=http://proxyName:port

Problems with .png files can sometimes be fixed by re-saving the image with interlacing switched off. This has caused me problems a couple of times.

What solved it for me: downloaded PSDs from Ionic, put my PNGs in the relevant PSD, saved the PSD to the resources folder and deleted my PNGs.

That seems really complicated. @jfbloom22

Same here. This was the output:

$ ionic resources
Ionic icon and splash screen resources generator
 uploading icon.png...
 uploading splash.png...

After spending 2 hours trying every option here (none of them worked), I finished debugging /usr/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/resources.js (Ubuntu 14.04). I've added a logging.logger.info(msg); after try & catch from function reject(msg) (line 441 in my file version).
...and the secret fighter appeared:

$ ionic resources
Ionic icon and splash screen resources generator
 uploading icon.png...
 uploading splash.png...
Invalid upload: unable to read uploaded image
Invalid upload: unable to read uploaded image

Well, al least now I know the error...

Interlaced image was causing this. And cacheImages: false in that resources.js file did the trick for that annoying cache issue. Problem solved!

I'm having the same issue, it is also not possible for me to add cacheImages: false to resources.js as that file is no longer available.

I'm using CLI version 2.0.0-beta.30 and Ionic version 2.0.0-beta.8

Same issue here

+1

+1

+1

+1 cacheImages: false, but folder is empty after delete all png´s

+1

i delete the whole folder(including icons and splashes) resources>ios>icon and resources>ios>splash
and run ionic resources.
ionic generated the new foldr resources>ios>icon and resources>ios>splash,but the folder is empty after doing that.

here is my output info:

Ionic icon and splash screen resources generator
icon ios icon.png (57x57) from cache
icon ios [email protected] (114x114) from cache
icon ios icon-40.png (40x40) from cache
icon ios [email protected] (80x80) from cache
icon ios [email protected] (120x120) from cache
icon ios icon-50.png (50x50) from cache
icon ios [email protected] (100x100) from cache
icon ios icon-60.png (60x60) from cache
icon ios [email protected] (120x120) from cache
icon ios [email protected] (180x180) from cache
icon ios icon-72.png (72x72) from cache
icon ios [email protected] (144x144) from cache
icon ios icon-76.png (76x76) from cache
icon ios [email protected] (152x152) from cache
icon ios [email protected] (167x167) from cache
icon ios icon-small.png (29x29) from cache
icon ios [email protected] (58x58) from cache
icon ios [email protected] (87x87) from cache
splash ios Default-568h@2x~iphone.png (640x1136) from cache
splash ios Default-667h.png (750x1334) from cache
splash ios Default-736h.png (1242x2208) from cache
splash ios Default-Landscape-736h.png (2208x1242) from cache
splash ios Default-Landscape@2x~ipad.png (2048x1536) from cache
splash ios Default-Landscape~ipad.png (1024x768) from cache
splash ios Default-Portrait@2x~ipad.png (1536x2048) from cache
splash ios Default-Portrait@~ipadpro.png (2048x2732) from cache
splash ios Default-Portrait~ipad.png (768x1024) from cache
splash ios Default@2x~iphone.png (640x960) from cache
splash ios Default~iphone.png (320x480) from cache
 uploading splash.png...
splash.png (4416x4416) upload complete
 generating splash ios Default-Landscape@~ipadpro.png (2732x2048)...

If you have two ionic apps, App 1's splash and icons are correct. App 2's are incorrect, when you do: ionic prepare android that copies App 1's resources.

App 1 and App 2 are in entirely different directories, have their own code base. Deleting the splash and icon PNGs does nothing because as soon as you do ionic prepare android the incorrect images are just copied into place.

No idea how to fix this. No errors from ionic resources and when i look at App 2's resources, they are correct. So it's painfully clear that ionic prepare android doesn't actually use the resources of the directory you are working in.

+1

I solve it by changing my splash.png from 2732×2732 to 2208x2208. The sample splash.psd generated from http://ionicframework.com/docs/cli/icon-splashscreen.html comes as 2732×2732.

I solved it from switching my PNGs to PSDs. Seems to only work with PSDs now

just tried saving as PSD, no joy. app 2 still has app 1's splash and icons. this is ONLY for android.

I have been spending hours on this issue and I have literally tried all the methods above but none of them worked for me.

I finally figured out that it is the splash.png dimension problem. The Photoshop Splash template provided from Ionic generates a 2732x2732 px image. But for some reason, the Ionic server doesn't like it at all. I ended up resizing it to 2208x2208 px and do

ionic resources

Problem solved for me.
Hope it helps.

@getqd This works for me, thanks!

@getqd This works for me, thanks! +1

@getqd Dude, Thx works like a charm

@getqd thanks!! +1

@getqd cool so that seemed to update the images under resources but the images in platforms/android/res just don't update. they are still "stuck" on the other app's image.

i've done grunt build i've tried ionic prepare android all to no avail. really strange.

+1 on Mac.

I made a cosmetic change to splash.png and it appeared to recreate without using cache (I get "generating..." messages rather than "from cache" messages), but didn't actually create any new files in the resources/ios/splash directory.
If I remove the resources/ios directory, ionic resources recreates it and the icon / splash folders below it, but leaves them empty- it does not actually put any images in there.

I resized my source splash.png to be 2208px wide (less high) and it worked.

Sometimes it's just something to do with the way the .png is saved.

Try passing the file through https://tinypng.com/. It has worked for me several times.

OMG I read everything and the only solutions that worked (together) were...

  1. Delete all files in temporary folder
  2. Turn off proxy
  3. Delete everything in resources folder except for the .PSD files
  4. MAKE SURE they are PSD files.
  5. Change the splash.psd to size: 2208x2208px
  6. enter this command separately for both icon and splash
ionic resources --icon --ignore-cache --force
ionic resources --splash --ignore-cache --force

@ubaidseth thank you!!! this did it. i followed your procedure exactly and it finally updated normally.

@ubaidseth there is a space missing in your icon generations command.. it should be:

ionic resources --icon --ignore-cache --force

When it comes to the splash screen, set splash.png dimensions to 2208x2208px, then run the simple command:

$ ionic resouces -s 

That was it! Nothing worked for me 'til the dimensions got updated.

@getqd Solution works for this issue. @driftyco do something with that server, please!

I am using home network to generate the resources it just does not generate any i only get these logs..
Ionic icon and splash screen resources generator
uploading icon.png...
uploading splash.png...

Need more info on why it does not generate any images...tried all the above commands.
last one
ionic resources --ignore-cache --force

ok worked for me though my splash was of right dimension the icon seem to have been in 192*193 that was the issue

+1 for shox's setting cacheImages: false in /usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/resources.js

Who wants this on anyways... (at least until it works properly).

I am facing same issue. ionic resources command stops after following message and nothing happens.

Ionic icon and splash screen resources generator
uploading icon.png...
uploading splash.png...

I removed my old icons. Changed cacheImages: false in /usr/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/resources.js. Nothing worked. Also tried proxy PROXY=http://proxy:port ionic resources

as @shamank said... I too receive message like below once added a log;

Ionic icon and splash screen resources generator
 uploading icon.png...
 uploading splash.png...
Invalid upload: unable to read uploaded image
Invalid upload: unable to read uploaded image

Is there any solution?

It's because of interlaced. Save the PNG with no interlaced and that's all.

El 19 ago. 2016 06:53, "Saurin Dashadia" [email protected]
escribió:

I am facing same issue. ionic resources command stops after following
message and nothing happens.

Ionic icon and splash screen resources generator
uploading icon.png...
uploading splash.png...

I removed my old icons. Changed cacheImages: false in
/usr/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/resources.js.
Nothing worked. Also tried proxy PROXY=http://proxy:port ionic resources

as @shamank https://github.com/shamank said... I too receive message
like below once added a log;

Ionic icon and splash screen resources generator
uploading icon.png...
uploading splash.png...
Invalid upload: unable to read uploaded image
Invalid upload: unable to read uploaded image

Is there any solution?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic-cli/issues/420#issuecomment-240977262,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAx_-E0ddFGFykyLNUcy8-WjYvmgos1Oks5qhX0ugaJpZM4EZxXt
.

@shamank images are already saved without interlaced.

sorry then, my issue was because of interlaced and cache.
try with this one: https://dl.dropboxusercontent.com/u/20379173/splash.png
(2208x2208 with no interlaced)

@robincrorie you are correct. Updated :)

In my case the problem was also the image dimensions, this is the template they're providing in the docs http://ionicframework.com/docs/cli/icon-splashscreen.html

If the server rejects them then that template needs to be changed, it is causing few hours of wasted time for every developer, is it there someone from the team that can do that adjustment?

As I tested.
.psd : both of icon and splash working.
.png : icon not working and splash working.
So best way is both files use .psd format then will working fine.
As previously, both of .png file could work. But now it didn't, and if you not using .psd, the server will not working and just show up
uploading icon.png...
uploading splash.png...
Holp this would help others.

  • The cache dir was generated with os.tmpDir(), so it usually is $TMPDIR, you can find it in '/usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/resources.js'.
  • And if you want to setting 'cacheImages:false', there is another 'resources.js' in path '/usr/local/lib/node_modules/ionic/lib/ionic/resources.js'.
  • By the way ,the splash png should be 2208px, i change the default 2732 to 2208 then successed,.
  • And if it's psd file, both the icon and splash should not too large, i use 9~10M failed.

hope userful.

not working either icon or splash. same issue => https://github.com/driftyco/ionic-cli/issues/1166

no matter how important other features might be, this IS a breaking one.

Anyone have any fixes?

  1. delete the plattforms
  2. ionic build ios/android (Platform is added automatically in ionic2)
    worked for me!

@Coufu try @Shmkvlx solution

Hi guys, try below steps, somehow it just worked for me:

  • re-adding splashscreen plugin
$ ionic plugin remove cordova-plugin-splashscreen
$ ionic plugin add cordova-plugin-splashscreen
  • re-generate resources
$ ionic resources
  • rebuild or re-run in device
$ ionic build android / ios

if it's still not working, try to reinstall your platform then re-run the steps above:

$ cordova platform remove android (or ios)
$ cordova platform add android (or ios)

Hope it's usefull.

just update ionic-cli
npm update ionic-cli

We recently released a new version of the CLI that should resolve the resources issues. Could you please update your CLI to at least 2.1.4?

npm install -g ionic@latest

Thank you!

nothing worked for me... i wanted to test ionic push and i followed the ionic push guide.. had to install google play, google repository, plugin push and such... ionic push works but icons and splash are gone. i did ionic resources, readded splashscreen plugin, readded platform, and i also updated tp 2.1.4.. nothing works.. neither icon nor splashscreen is working.

p.s. ionic resources cmd creates the icons and splashscreens in resources/android/icon and /splash successfully

On 2.1.4 with a project I just started 3 days ago. Tried everything listed in this thread but nothing works.

this is ok!
Look:
wangzhendeMac-mini:Givenera-Ionic wangzhen$ sudo ionic resources WARN: ionic.project has been renamed to ionic.config.json, please rename it. WARN: ionic.project has been renamed to ionic.config.json, please rename it. Ionic icon and splash screen resources generator splash ios Default-Landscape@~ipadpro.png (2732x2048) skipped, source image splash.png (2208x2208) too small splash ios Default-Portrait@~ipadpro.png (2048x2732) skipped, source image splash.png (2208x2208) too small uploading icon.png... uploading splash.png... icon.png (1024x1024) upload complete splash.png (2208x2208) upload complete generating icon ios [email protected] (87x87)... generating icon ios [email protected] (58x58)... generating icon ios icon-small.png (29x29)... icon ios icon-small.png (29x29) generated generating icon ios [email protected] (167x167)... icon ios [email protected] (58x58) generated generating icon ios [email protected] (152x152)... icon ios [email protected] (152x152) generated generating icon ios icon-76.png (76x76)... icon ios [email protected] (167x167) generated generating icon ios [email protected] (144x144)... icon ios icon-76.png (76x76) generated generating icon ios icon-72.png (72x72)... icon ios [email protected] (144x144) generated generating icon ios [email protected] (180x180)... icon ios [email protected] (87x87) generated generating icon ios [email protected] (120x120)... icon ios [email protected] (120x120) generated generating icon ios icon-60.png (60x60)... icon ios [email protected] (180x180) generated generating icon ios [email protected] (100x100)... icon ios [email protected] (100x100) generated generating icon ios icon-50.png (50x50)... icon ios icon-50.png (50x50) generated icon ios [email protected] (120x120) generated generating icon ios [email protected] (80x80)... icon ios [email protected] (80x80) generated generating icon ios icon-40.png (40x40)... icon ios icon-40.png (40x40) generated generating icon ios [email protected] (114x114)... icon ios [email protected] (114x114) generated generating icon ios icon.png (57x57)... icon ios icon.png (57x57) generated generating splash ios Default~iphone.png (320x480)... splash ios Default~iphone.png (320x480) generated generating splash ios Default@2x~iphone.png (640x960)...

this is "Default@2x~iphone.png (640x960)" not complate.

run command ls /tmp/*.png

you found list:
/tmp/46d1665f-1024x768.png /tmp/ae3caf4c-152x152.png /tmp/46d1665f-1242x2208.png /tmp/ae3caf4c-167x167.png /tmp/46d1665f-1536x2048.png /tmp/ae3caf4c-180x180.png /tmp/46d1665f-2048x1536.png /tmp/ae3caf4c-29x29.png /tmp/46d1665f-2208x1242.png /tmp/ae3caf4c-40x40.png /tmp/46d1665f-320x480.png /tmp/ae3caf4c-50x50.png /tmp/46d1665f-640x1136.png /tmp/ae3caf4c-57x57.png /tmp/46d1665f-640x960.png /tmp/ae3caf4c-58x58.png /tmp/46d1665f-750x1334.png /tmp/ae3caf4c-60x60.png /tmp/46d1665f-768x1024.png /tmp/ae3caf4c-72x72.png /tmp/ae3caf4c-100x100.png /tmp/ae3caf4c-76x76.png /tmp/ae3caf4c-114x114.png /tmp/ae3caf4c-80x80.png /tmp/ae3caf4c-120x120.png /tmp/ae3caf4c-87x87.png /tmp/ae3caf4c-144x144.png

this is /tmp/46d1665f-640x960.png

run command sudo rm -rf /tmp/46d1665f-640x960.png

and run command sudo rm -rf <you path> ios/Default@2x~iphone.png

and rebuild run command sudo ionic resources

This is ok!

Complate!!

@randyjensen same here... sad is, that i ll ve to update my app, which is alrdy in store, with no icons and splashs -.-
btw.. i noticed, that after running ionic run android, that a folder called res is created in root directory. (maybe it's default behaviour but i noticed recently.. ) folder android/icon + android/splash gets created in resources too. and the pngs are inside.. but nthing..

Have the latest Ionic, still happening. Can't find a workaround that works for me, have to manually copy and paste resource files.

cache is set to false, tried deleting temp folder, changing images to PSD. Nothing...

Update the CLI to 2.1.4 and set the property PROXY properly (because of my company proxy) worked for me.

UPDATE: The icons are generated but after install the app in the device with 'ionic run' the icons are not used.

+1

same case. ionic 2.1.4, icons getting generated properly but not used when building on device.

EDIT:
I've found the problem by closely inspecting XCode compiler warnings - most of them are about icons being too big, but there was one saying that 60x60@2x icon is required for iOS 7-10. Right-click on that warning allowed me to identify the file in question, I manually created a 60x60@2x icon, and replaced it with the same file name in that location. It now displays the app icon in iOS properly.

It would be nice if ionic could update the generator to fix this, as well as the sizing of other icons to get rid of the compiler warnings.

for android:
just put ur icons and splashs manually in platforms/android/res or platforms/ios/res in the respective folders. i had to do it for the time being, because im going to upload my app in the app stores today.

for ios:
ionic resources seems working when u put icon.psd and splash.psd in your resources folder.

This still doesn't work at all. Copying the icons manually to platforms/android/res will solve it obviously but, how come in more than year there is no solution for this. What's the point of having a command to generate all icons and splash screens when the final place where they should go would never get updated: the resource folders of the respective platforms

When I copy & paste the app icon for push/local notifications is system standard 'alarmBell' icon. When generating resources was working I had my app icon for push/localnotifications.

Is there somewhere else I should c&p the app icon in the platforms folder?

Spent hours for this and decided to use manual way instead.

overwrite platforms\android\res\*\*.png files and rebuild the APK.

I face this issue with ionic-cli 2.1.8 and none of the ionic commands helped me. At the end I did the same as DazChong and that finally resolved the issue.

Still having issues myself. Any update on this?

Also having this issue with app splash and icon.
I grabbed the default resources, overwrote them so dimensions should be correct.
Have noticed if i run ionic prepare android then it dumps a res folder in the top of my project folder instead of the android platform.

Manual moving the res folder has become the only solution which is annoying if you just want to update resources and have everything automated.

I just copied everything manual as it is not working with ionic 2.1.13 / Cordova 6.4.0 - this works out

Confirmed.

same problem here, always the default image
Ionic 2.1.13/Cordova 6.4.0

Hi @jthoms1,

Using the PROXY variable in Windows allowed me to use properly 'ionic resources'. The problem is what the people is saying about ionic not taking the icon in the build, however, this is working in my MAC building for iOS but not in my Windows computer building for Android.

I will test building in MAC for Android but I don't have time at the moment.

I hope this info is helpful.

Same here default images...

having this issue on android

There is a bug in the latest version of the ionic CLI. ionic prepare android creates the res folder in the root folder of the project instead of platforms/android. After manually copying the res folder into the platforms/android folder the correct splash and icons are visible.

Yes I see the same, any fix or way to automate this? I've got a build script running with Hockey to distribute etc so copy / paste is a bit out of the question

** in the meantime made a gulp task to move the res folder, but looking forward to the fix :)

is there a fix coming out soon on this ??? I keep getting cordova icon inside my android/res/ directory

This is so annoying

Not sure if this is the same issue. But I notice it's indeed not working as of now. I just build it's now 11:58, my last version if from adding the platform, still showing the cordova image.

I am using the latest version of the Ionic 2 Platform and the issue is still there.
The _resources_ command it's just fine, all the resources are created correctly, but the res files inside the android platform are not updated.

I hope this can be solved soon.

Hi everyone, below steps are working for me, and i am using ionic 2 cli v.2.1.13.

$ ionic platform rm android
$ ionic platform add https://github.com/apache/cordova-android.git#master
$ ionic resources
$ ionic build android

Some how i manage to fix this by manually copy the generated file on res folder, one by one to corresponding folder in platforms/android/res and rename it

im using

Your system information:

Cordova CLI: 6.4.0
Gulp version:  CLI version 1.2.2
Gulp local:   Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

That works but it's a temporary workaround if you want to change the logo
you have to do it again
On Tue, 6 Dec 2016 at 08:03, TwinLight notifications@github.com wrote:

Some how i manage to fix this by manually copy the generated file on res
folder, one by one to corresponding folder in platforms/android/res and
rename it

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic-cli/issues/420#issuecomment-265076639,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADp7b3mouTxdQaQOE35CTNYLQGLWhsFzks5rFQjAgaJpZM4EZxXt
.

I've been having this issue all day, glad I'm not the only one experiencing it but since it's a year old, I doubt it'll be fixed anytime soon.

Using ionic cli v2.1.13.
OS: Ubuntu 16.0.4 LTS
Node: V6.7.0

still facing this issue. All I did was manually overwriting the files from res folder to platforms/android/res. no other solution worked for me, not even --clean-cache. any other cleaner solution ?

@agupta-q4 for now I would write a custom gulp task that includes ionic build android and then copies and replaces the res folder to the proper place.

Then instead of doing ionic build android, just run gulp build-android or something like that which fires off your task

gulp.task('move-android-res', false, function(cb) {
    exec('[ -d "res" ] && cp -R res platforms/android && rm -R res || echo "Error: Directory res does not exists." ',
    function(err) {
        cb(err);
    });
});

I think that @tomysmile has found the way to fix it at the moment, this is a Cordova bug and not Ionic specific:

Cordova released a fix for this one month ago for the Android platform but for some reason the cordova-cli is still using an old version of the Android platform that hasn't the problem fixed.

So, the steps:

$ ionic platform rm android
$ ionic platform add android
$ ionic platform update [email protected]

You can see that by default cordova is adding as android platform version the 6.0.0 but the bug is fixed in the 6.1.0 (https://github.com/apache/cordova-android/blob/master/RELEASENOTES.md).

Remove and add the platform can be avoided, I've added them for the people that had copy/pasted the icon and splashcreen to the platform folder, if you haven't done that the third step would be enough.

@PabloFNK Thx

$ ionic platform rm android
$ ionic platform add android
$ ionic platform update [email protected]

Now the icon is working correctly, but still do not see the splash screen, showing the white screen

Cordova CLI: 6.4.0
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
OS:
Node Version: v6.9.1

@tore90turris are you following correctly all the steps (http://blog.ionic.io/automating-icons-and-splash-screens/)?

Both, icon and splashscreen is working now to me.

@PabloFNK
Yes, launch ionic resources --splash
This is my config.xml

<platform name="android">
    <allow-intent href="market:*"/>
    <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>
  <engine name="android" spec="~6.0.0"/>
  <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>

Is there a reason why there is a res and resources folder now? Or is this just a bug?

@rolandjitsu Apparently that res folder should be inside platforms/android. Just overwrite the one already there.

+1 for ionic resources --clean-cache

thanks for PabloFNK and Elijax

I put my splash.png inside my res/ folder, ran --clean-cache, but the splash images inside my android folder stays the same. what's wrong?

@theunreal , have u try to run this on your terminal.

$ ionic platform rm android
$ ionic platform add android
$ ionic platform update [email protected]

Finally the update command did the trick for me

I had problem like this when I removed and added platform android.
I saw that in folder platforms/android/res there were default splashscreen's images. When I overwrited them splashscreen was updated in application.
These is not correct way to fix it because I shouldn't touch manualy folder /platform/ but I hope that someone find solution how to do that in command line and will write it below.

For me re installing cordova and ionic using npm install -g cordova and npm install -g ionic (on latest update released) - removing and readding platforms works.

@ubaidseth finally that works!!!!!!!!! +1

+1 @bormansquirrel for ionic resources --clean-cache;

Just delete files from your temp folder of windows, then run "ionic resources" command again. ionic will re-upload and generate new images.

In my case it worked updating the platform

$ ionic platform update [email protected]

On osX.

  1. Find the temp folder
    echo $TMPDIR
  2. Delete all images in it
  3. Generate resources.
  4. Voila!

As @rahianeja said since 17th January (Cordova released version 6.5.0) it is using the last version of cordova-android with the bug fixed, so, it's no longer needed the 'update' trick.

Just update Cordova to the latest version and finally remove and add the platform.

I have to copy all the directories from 'res' directory on project root to platform/android/res .
It is wired.

Note: ionic platform rm android and ionic platform add android didn't solvevd it

Still not working... i tried cleaning the $TMPDIR and removed the platform and add again.

Mac OSX.

I am actively working on our implementation of CLI v3. I did a ground up rewrite and can tell you that the caching issues are fixed. We will be releasing this in the coming weeks. Right now I am going to lock this issue.

Was this page helpful?
0 / 5 - 0 ratings