Browser-Could not XHR config.xml: Not Found - ionic-framework

Question

When i try to deploy my ionic app to web, i get this error:
cordova.js:866 [Browser][cordova.js][xhrStatusChangeHandler] Could not
SplashScreenProxy.js:131
[Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found SplashScreenProxy.js:131

Answer 1

The Splash Screen component is available only as Ionic Native component, so we can't use it inside browser, until ionic 4. Now, you can test in the terminal like this:
$ ionic cordova build browser
$ ionic serve --cordova --platform browser
After that config.xml is still not found, so I just copy to this folder:
$ cp config.xml platforms/browser/platform_www
Or just copy manually the file config.xml from your app folder and paste in the directory platforms/browser/platform_www
There will be another error on the browser console:
GET http://localhost:8100/screen 404 (Not Found)
This error is because on the config.xml file the value for SplashScreen is "screen" (or splash in older ionics)
<preference name="SplashScreen" value="screen" />
If you change value for an image name, like "logo.png"
<preference name="SplashScreen" value="logo.png" />
and put that file in the same directory (/platforms/browser/platform_www) then you will get a splash image on the browser (I used chrome for this test and it worked)

Answer 2

For anyone using Angular that already has config.xml in /platforms/www, this is what worked for me. Open up angular.json and look for the projects/APPNAME/architect/build/options/assets property and add an entry to tell Angular where to find config.xml. Here is what my assets array ended up looking like:
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "config.xml",
"input": "",
"output": "/"
},
{
"glob": "**/*.svg",
"input": "../../node_modules/ionicons/dist/ionicons/svg",
"output": "svg"
}
]
After that the splashscreen appears, but I get a 404 for "/screen" because of the config now looking for a splashscreen image that isn't there. I don't want to change this for Android and iOS, but in the browser I just want to point it at an image, so I added the following node in config.xml, immediately before the SplashScreen preference (adding it after doesn't work).
<platform name="browser">
<preference name="SplashScreen" value="/assets/images/splashscreen.jpg" />
<preference name="SplashScreenWidth" value="600" />
<preference name="SplashScreenHeight" value="300" />
</platform>
<preference name="SplashScreen" value="screen" />
Note that I have to specify a width and height, which you don't need to do for Android or iOS.
You may need to run ionic cordova prepare browser to copy the config into the right folder (or manually copy it to /platforms/browser/www).
And voila! That should do it.