Translate error Cross origin requests are only supported for HTTP on emulator and device but working in browser

prutya · March 14, 2017, 10:22am

I’m configure my app just exactly what they said in: https://ionicframework.com/docs/v2/resources/ng2-translate/
Which is an official docs. It is working when I test with: ionic serve

But when I use: ionic emulate

I got the error:

[Error] XMLHttpRequest cannot load file:///Users/popeye/Library/Developer/CoreSimulator/Devices/8FC7E525-6B17-4DBA-8147-FE1AF517D82B/data/Containers/Bundle/Application/0F15E5D4-DC80-439A-A9E4-98E9D6A2577C/Manulife.app/www/assets/translates/null.json. Cross origin requests are only supported for HTTP.
e (polyfills.js:3:2558)
scheduleTask (polyfills.js:3:9421)
send (Anonymous Script 1 (line 2))
(anonymous function) (main.js:57343)
subscribe (main.js:230)
subscribe (main.js:227)
connect (main.js:46460)
call (main.js:46516)
subscribe (main.js:227)
subscribe (main.js:227)
getTranslation (main.js:30410)
retrieveTranslations (main.js:30397)
use (main.js:30371)
ionViewDidLoad (main.js:59718)
_lifecycle (main.js:4673)
_didLoad (main.js:4561)
_didLoad (main.js:29969)
(anonymous function)
onInvoke (main.js:38105)
run (polyfills.js:3:6488)
_viewAttachToDOM (main.js:29677)
_transition (main.js:29764)
_postViewInit (main.js:29633)
_queueTrns (main.js:29456)
ngAfterViewInit (main.js:65947)
detectChangesInternal (/AppModule/MyApp/component.ngfactory.js:57)
detectChanges (main.js:103898)
detectChanges (main.js:103991)
detectChangesInternal (/AppModule/MyApp/host.ngfactory.js:28)
detectChanges (main.js:103898)
detectChanges (main.js:103991)
detectChanges (main.js:56059)
ngOnInit (main.js:41449)
ngDoCheck (/IonicModule/IonicApp/wrapper.ngfactory.js:21)
detectChangesInternal (/IonicModule/IonicApp/host.ngfactory.js:27)
detectChanges (main.js:103898)
detectChanges (main.js:103991)
detectChanges (main.js:56059)
forEach
tick (main.js:35960)
_loadComponent (main.js:35938)
bootstrap (main.js:35929)
forEach
_moduleDoBootstrap (main.js:35831)
(anonymous function) (main.js:35799)
onInvoke (main.js:38105)
run (polyfills.js:3:6488)
(anonymous function) (polyfills.js:3:4587)
invokeTask (polyfills.js:3:9729)
onInvokeTask (main.js:38096)
invokeTask (polyfills.js:3:9672)
runTask (polyfills.js:3:7094)
i (polyfills.js:3:3679)
promiseReactionJob

Any suggestions?

Regards,
Popeye

jorgecaballero · July 13, 2017, 8:34am

Hi @prutya, did you find any solution to make it work on emulator or device? I am having the same problem. Thank you very much!

Sujan12 · July 13, 2017, 3:34pm

Did you remote debug the problem on the device already?
Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android
Look at the console and network tabs for errors.

prutya · July 14, 2017, 7:06am

The problem was cause by SalesforceCordova SDK.

I manage to fix the problem by adding this code to

AppDelegate+SalesforceHybridSDL.m

Anyway here is my code in app.module.ts

The problem are gone. The en.json, th.json of mine were load properly. I fix it a while ago I hope this solution may or may not help. Please give it a try.

jorgecaballero · July 17, 2017, 7:24am

Hello @prutya, this code solve my problem too. You are right, it is a problem with Salesforce plugin. Thank you!