Ionic-cli: v3beta7 - Error: encountered bad status code (400) - When generating resources

Created on 18 Apr 2017 · 26Comments · Source: ionic-team/ionic-cli

v3 beta7 testing

Please ensure that you are on the latest version of the CLI.
npm view ionic@latest version

2.2.2

What version of the CLI are you using? Output of `ionic --version`

3.0.0-beta7

Short description of the problem:

Getting the below error when generating resources on iOS

You need to be logged into your Ionic account in order to run the cordova:resources command.

Log into your Ionic account
If you don't have one yet, create yours by running: ionic signup

? Email: **********
? Password: *****************
✔ Collecting resource configuration and source images - done!
✔ Uploading source images to prepare for transformations - done!
⠹ Generating platform resources Error: encountered bad status code (400) for http://res.ionic.io/api/v1/transform
    at Request.cli_utils_1.createRequest.timeout.type.send.on (/Users/proj/app/node_modules/@ionic/cli-plugin-cordova/dist/lib/resources.js:159:24)
    at emitOne (events.js:96:13)
    at Request.emit (events.js:191:7)
    at Request._emitResponse (/Users/proj/app/node_modules/superagent/lib/node/index.js:745:10)
    at ClientRequest.<anonymous> (/Users/proj/app/node_modules/superagent/lib/node/index.js:360:10)
    at Object.onceWrapper (events.js:293:19)
    at emitOne (events.js:101:20)
    at ClientRequest.emit (events.js:191:7)
    at HTTPParser.parserOnIncomingClient (_http_client.js:522:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)

What behavior are you expecting?

Generation of resources without errors

Steps to reproduce:

run ionic cordova resources on iOS

Source

zoinkydoink

Most helpful comment

Change file dimensions,

project/resources/splash.png => 2208x2208 to 2732x2732

Run: ionic cordova resources

niojihy on 23 Apr 2017

👍8

All 26 comments

I have also ran these commands AGAIN
still same error

npm install -g ionic@beta
npm install --save-dev @ionic/cli-plugin-ionic-angular@beta @ionic/cli-plugin-cordova@beta

zoinkydoink on 19 Apr 2017

if u try ionic cordova resources -i it should work, but the ionic cordova resources -s does not work for me either

zoinkydoink on 19 Apr 2017

we got the same issue

⠹ Generating platform resources: 41 / 48 complete Error: timeout of 30000ms reached for http://res.ionic.io/api/v1/transform

orlyapps on 19 Apr 2017

@zoinkydoink @orlyapps Are you using custom resources?

imhoffd on 19 Apr 2017

@dwieeb I am not sure what you mean by "custom" I have a splash.png and icon.png in the resource folder and those images are made by my designer, meaning they are custom logos if that is what you mean.

Also do you know when we are to expect next beta?

zoinkydoink on 19 Apr 2017

We dont also use any "custom" icon. Same as @zoinkydoink
Workarround:

uninstall ionic beta
install stable ionic
call ionic resources
uninstall ionic
install stable ionic beta

😄

btw: splash.png is 2732x2732px

orlyapps on 19 Apr 2017

👍2

@orlyapps what is the command to uninstall betas and how do you pick which is the ionic stable? This issue has been a show stopper for me

zoinkydoink on 19 Apr 2017

Until yesterday I got same error when run ionic cordova resources

I could generate the icons resources successfully passing --icon to ionic cordova resources --icon command.

But I got error generating the splash resources passing --splash:

✔ Collecting resource configuration and source images - done!
✔ Uploading source images to prepare for transformations - done!
⠹ Generating platform resources Error: encountered bad status code (400) for http://res.ionic.io/api/v1/transform

But today I got a different error both with parameters --icon and --splash to ionic cordova resources command:

$ ionic cordova resources 
✔ Collecting resource configuration and source images - done!
⠸ Uploading source images to prepare for transformations HTTP Error 503: POST http://res.ionic.io/api/v1/upload

<!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8">
        <title>Application Error</title>
        <style media="screen">
          html,body,iframe {
            margin: 0;
            padding: 0;
          }
          html,body {
            height: 100%;
            overflow: hidden;
          }
          iframe {
            width: 100%;
            height: 100%;
            border: 0;
          }
        </style>
      </head>
      <body>
        <iframe src="//www.herokucdn.com/error-pages/application-error.html"></iframe>
      </body>
    </html>

What version of the CLI are you using? Output of ionic --version
3.0.0-beta7

feliperfmarques on 20 Apr 2017

For now I also am using the workaround like @orlyapps:
@zoinkydoink Here are the commands. Follow the steps below:

npm -g uninstall ionic@beta
npm -g install ionic
ionic resources
npm -g uninstall ionic
npm -g install ionic@beta

feliperfmarques on 20 Apr 2017

This has been fixed and beta8 will be out soon! Thank you!

imhoffd on 21 Apr 2017

Change file dimensions,

project/resources/splash.png => 2208x2208 to 2732x2732

Run: ionic cordova resources

niojihy on 23 Apr 2017

👍8

^ Correct. For existing projects, you will need a splash image with dimensions 2732x2732. Here is the default splash image: https://raw.githubusercontent.com/driftyco/ionic2-app-base/master/resources/splash.png

New projects will have the new default splash image.

imhoffd on 23 Apr 2017

👍3

@niojihy @dwieeb It's solved my problem. I have a existing v2 project and my splash had a dimension of 2208x2208. I changed splash dimensions to 2732x2732 and re-ran ionic cordova resources, everything works fine now.

feliperfmarques on 24 Apr 2017

I've 2732x2732 dimensions in IONIC V1 project. But the problem still exists.

ahayder on 26 Jul 2017

@ahayder You may get the timeout on a slow connection because the image has to be fully uploaded and then transformed during the request. There's nothing we can do right now about the 30s server timeout.

imhoffd on 26 Jul 2017

Be sure to don't try to send your .psd file which are often heavier than your png file. After that delete the .md5, then try again. That did the trick for me

hugoblanc on 24 Aug 2017

Had the same issue, what work for me was to reduce the image size on disk, compressed it with tinypng, went from 3mb to 900k and it work after that

ndriJK on 4 Oct 2017

On ionic 3.12.0, I am getting one of the errors mentioned above: "uploading source images to prepare for transformations HTTP Error 503: POST http://res.ionic.io/api/v1/upload" etc., etc. So I must be doing something wrong, or it wasn't fixed?

solumyr on 10 Oct 2017

@solumyr - there was a server issue earlier. It appears to be cleared up now. Can you give this another try?

kensodemann on 10 Oct 2017

Works, thanks!

solumyr on 10 Oct 2017

Hi @kensodemann, it seems that there is a problem again, return error to use:

ionic cordova resource
ionic cordova resource --icon
Error:
HTTP Error 503: POST https://res.ionic.io/api/v1/upload

ionic cordova resource --splash
Error:
Generating platform resources: 6 / 12 complete - failed
Error: encountered bad status code (503) for https://res.ionic.io/api/v1/transform

cli packages: (...\npm\node_modules)
@ionic/cli-utils : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:
cordova (Cordova CLI) : 7.1.0

local packages:
@ionic/app-scripts : 3.0.1
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2

System:
Android SDK Tools : 26.1.1
Node : v8.9.0
npm : 5.5.1
OS : Windows 10

havo07 on 21 Nov 2017

Its Works!

havo07 on 21 Nov 2017

I had the same problem as of today.
I can confirm that the solution provided by @niojihy still works!

holographix on 18 Dec 2017

Error: encountered bad status code (503) for https://res.ionic.io/api/v1/transform
body:

Application Error

at Response.res.on (C:\Users\swaraj\AppData\Roaming\npm\node_modules\ionic\node_modules\@ionic\cli-utils\lib\cordova\resources.js:150:32)
at Response.emit (events.js:159:13)
at IncomingMessage.emit (events.js:164:20)
at endReadableNT (_stream_readable.js:1062:12)
at process._tickCallback (internal/process/next_tick.js:152:19)

marutiedu on 8 Feb 2018

@feliperfmarques HTTP 503 means that there are temporary brief interruption in the ionic resource transformation service API... check out this post in my blog ;) https://buonageek.blogspot.it/2018/03/error-encountered-bad-status-code-503.html

albes on 7 Mar 2018

None of these worked for me, everything resulted in images that were still too large due; I fixed it by doing trying each one separately:
ionic cordova resource --icon
ionic cordova resource --splash
The ones that got the HTTP 400 error, I resized with the only service that could handle the upload size and reduced them to a size the resource converter would accept: https://compress-or-die.com/png-process