[Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found - google-maps

Question

I am trying to develop an app using ionic 4, angular 6, Nodejs 10 and need to integrate google maps. When I run my app, I always see this error in the dev tools browser console - [Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found. Copied the full console at the end.
Following is the code I have -
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { GoogleMaps } from '#ionic-native/google-maps';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule
],
providers: [
StatusBar,
GoogleMaps,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Following is my app.component.ts file -
import { Component, ViewChild } from '#angular/core';
import { Platform, Nav } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { HomePage } from './home/home.page';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
#ViewChild(Nav) nav: Nav;
rootPage: any;
public appPages = [
{
title: 'Home',
url: '/home',
icon: 'home'
},
{
title: 'List',
url: '/list',
icon: 'list'
}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.rootPage = HomePage;
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
home.page.ts
import { Component, OnInit } from '#angular/core';
import { GoogleMaps, GoogleMap } from '#ionic-native/google-maps/ngx';
import { Platform } from '#ionic/angular';
import { Environment } from '#ionic-native/google-maps';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
map: GoogleMap;
constructor( private platform: Platform) {}
async ngOnInit() {
await this.platform.ready();
await this.loadMap();
}
loadMap() {
Environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': 'Agktkllffff1xGYLjDF0v1i2RSDrqDLjEmDdLI',
'API_KEY_FOR_BROWSER_DEBUG': ''
});
this.map = GoogleMaps.create('map_canvas');
}
}
home.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h3>GoogleMaps</h3>
<div id = "map_canvas">
<button ion-button (click)="onButtonClick($event)">Demo</button>
</div>
</ion-content>
I checked my Google Map API key and it doesn't has problem and double checked that I am using the correct one. My account is also fine and shouldn't be a problem with that. I am wondering what is causing this issue. The command that I am using to run my application is -
ionic cordova run browser -l
The url that opens up is http://172.29.54.8:8100/home
console.log error details -
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
cordova.js:1066 deviceready has not fired after 5 seconds.
cordova.js:1059 Channel not fired: onPluginsReady
cordova.js:1059 Channel not fired: onCordovaReady
bootstrap.js:15 Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.
(anonymous) # bootstrap.js:15
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask # zone.js:496
ZoneTask.invoke # zone.js:485
timer # zone.js:2054
setTimeout (async)
scheduleTask # zone.js:2075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask # zone.js:255
scheduleMacroTaskWithCurrentZone # zone.js:1114
(anonymous) # zone.js:2090
proto.(anonymous function) # zone.js:1394
checkReady # bootstrap.js:13
./node_modules/#ionic-native/core/index.js # index.js:11
__webpack_require__ # bootstrap:83
./node_modules/#ionic-native/splash-screen/ngx/index.js # index.js:1
__webpack_require__ # bootstrap:83
./src/app/app.module.ts # app.component.ts:12
__webpack_require__ # bootstrap:83
./src/main.ts # main.ts:1
__webpack_require__ # bootstrap:83
0 # main.ts:12
__webpack_require__ # bootstrap:83
checkDeferredModules # bootstrap:45
webpackJsonpCallback # bootstrap:32
(anonymous) # main.js:1
cordova.js:1024 adding proxy for common
cordova.js:1024 adding proxy for PluginEnvironment
cordova.js:1024 adding proxy for CordovaGoogleMaps
cordova.js:1024 adding proxy for PluginLocationService
cordova.js:1024 adding proxy for PluginGeocoder
cordova.js:1024 adding proxy for StatusBar
cordova.js:1024 adding proxy for Device
cordova.js:1024 adding proxy for SplashScreen
StatusBarProxy.js:23 StatusBar is not supported
zone.js:2969 GET http://172.29.54.8:8100/config.xml 404 (Not Found)
scheduleTask # zone.js:2969
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask # zone.js:255
scheduleMacroTaskWithCurrentZone # zone.js:1114
(anonymous) # zone.js:3001
proto.(anonymous function) # zone.js:1394
readConfig # cordova.js:891
initAndShow # SplashScreenProxy.js:154
(anonymous) # SplashScreenProxy.js:165
build # cordova.js:51
require # cordova.js:66
localRequire # cordova.js:47
exports.mapModules # cordova.js:1352
(anonymous) # cordova.js:1152
f # cordova.js:645
Channel.fire # cordova.js:798
(anonymous) # cordova.js:1144
onScriptLoadingComplete # cordova.js:1574
scriptLoadedCallback # cordova.js:1591
(anonymous) # cordova.js:1545
wrapFn # zone.js:1188
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask # zone.js:496
invokeTask # zone.js:1540
globalZoneAwareCallback # zone.js:1566
error (async)
customScheduleGlobal # zone.js:1666
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:407
onScheduleTask # zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask # zone.js:258
(anonymous) # zone.js:1831
desc.set # zone.js:1244
requireEnsure # bootstrap:145
webpackAsyncContext # .*\.entry\.js$ include: \.entry\.js$ namespace object:780
o # ionic.core.js:6
t.In # ionic.core.js:9
$ # ionic.core.js:6
(anonymous) # ionic.core.js:6
r # ionic.core.js:6
(anonymous) # ionic.core.js:6
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:388
onInvoke # core.js:14060
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run # zone.js:138
(anonymous) # zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:421
onInvokeTask # core.js:14051
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:188
drainMicroTaskQueue # zone.js:595
Promise.then (async)
scheduleMicroTask # zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:410
onScheduleTask # zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask # zone.js:252
scheduleResolveOrReject # zone.js:862
resolvePromise # zone.js:808
(anonymous) # zone.js:724
webpackJsonpCallback # bootstrap:25
(anonymous) # 12.js:1
cordova.js:866 [Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found
fail # cordova.js:866
xhrStatusChangeHandler # cordova.js:880
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask # zone.js:496
invokeTask # zone.js:1540
globalZoneAwareCallback # zone.js:1566
load (async)
customScheduleGlobal # zone.js:1666
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask # zone.js:258
(anonymous) # zone.js:1831
readConfig # cordova.js:886
initAndShow # SplashScreenProxy.js:154
(anonymous) # SplashScreenProxy.js:165
build # cordova.js:51
require # cordova.js:66
localRequire # cordova.js:47
exports.mapModules # cordova.js:1352
(anonymous) # cordova.js:1152
f # cordova.js:645
Channel.fire # cordova.js:798
(anonymous) # cordova.js:1144
onScriptLoadingComplete # cordova.js:1574
scriptLoadedCallback # cordova.js:1591
(anonymous) # cordova.js:1545
wrapFn # zone.js:1188
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask # zone.js:496
invokeTask # zone.js:1540
globalZoneAwareCallback # zone.js:1566
error (async)
customScheduleGlobal # zone.js:1666
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:407
onScheduleTask # zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask # zone.js:258
(anonymous) # zone.js:1831
desc.set # zone.js:1244
requireEnsure # bootstrap:145
webpackAsyncContext # .*\.entry\.js$ include: \.entry\.js$ namespace object:780
o # ionic.core.js:6
t.In # ionic.core.js:9
$ # ionic.core.js:6
(anonymous) # ionic.core.js:6
r # ionic.core.js:6
(anonymous) # ionic.core.js:6
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:388
onInvoke # core.js:14060
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run # zone.js:138
(anonymous) # zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:421
onInvokeTask # core.js:14051
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:188
drainMicroTaskQueue # zone.js:595
Promise.then (async)
scheduleMicroTask # zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:410
onScheduleTask # zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask # zone.js:252
scheduleResolveOrReject # zone.js:862
resolvePromise # zone.js:808
(anonymous) # zone.js:724
webpackJsonpCallback # bootstrap:25
(anonymous) # 12.js:1
SplashScreenProxy.js:163 [Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found
(anonymous) # SplashScreenProxy.js:163
fail # cordova.js:869
xhrStatusChangeHandler # cordova.js:880
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask # zone.js:496
invokeTask # zone.js:1540
globalZoneAwareCallback # zone.js:1566
load (async)
customScheduleGlobal # zone.js:1666
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask # zone.js:258
(anonymous) # zone.js:1831
readConfig # cordova.js:886
initAndShow # SplashScreenProxy.js:154
(anonymous) # SplashScreenProxy.js:165
build # cordova.js:51
require # cordova.js:66
localRequire # cordova.js:47
exports.mapModules # cordova.js:1352
(anonymous) # cordova.js:1152
f # cordova.js:645
Channel.fire # cordova.js:798
(anonymous) # cordova.js:1144
onScriptLoadingComplete # cordova.js:1574
scriptLoadedCallback # cordova.js:1591
(anonymous) # cordova.js:1545
wrapFn # zone.js:1188
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask # zone.js:496
invokeTask # zone.js:1540
globalZoneAwareCallback # zone.js:1566
error (async)
customScheduleGlobal # zone.js:1666
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:407
onScheduleTask # zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask # zone.js:258
(anonymous) # zone.js:1831
desc.set # zone.js:1244
requireEnsure # bootstrap:145
webpackAsyncContext # .*\.entry\.js$ include: \.entry\.js$ namespace object:780
o # ionic.core.js:6
t.In # ionic.core.js:9
$ # ionic.core.js:6
(anonymous) # ionic.core.js:6
r # ionic.core.js:6
(anonymous) # ionic.core.js:6
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:388
onInvoke # core.js:14060
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run # zone.js:138
(anonymous) # zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:421
onInvokeTask # core.js:14051
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask # zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:188
drainMicroTaskQueue # zone.js:595
Promise.then (async)
scheduleMicroTask # zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:410
onScheduleTask # zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask # zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask # zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask # zone.js:252
scheduleResolveOrReject # zone.js:862
resolvePromise # zone.js:808
(anonymous) # zone.js:724
webpackJsonpCallback # bootstrap:25
(anonymous) # 12.js:1
bootstrap.js:10 Ionic Native: deviceready event fired after 15597 ms
StatusBarProxy.js:23 StatusBar is not supported
cordova.js:1024 adding proxy for map_0_605401752643
util.js:225 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Answer 1

try {
xhr.open("get", "/config.xml", true);
xhr.send();
} catch(e) {
fail('[Browser][cordova.js][readConfig] Could not XHR config.xml: ' + JSON.stringify(e));
}
Try to find these lines in cordova.js file of the platform.
I guess your application is in a sub-folder. Hence the error. Change it to
try {
xhr.open("get", "/<foldername>/config.xml", true);
xhr.send();
} catch(e) {
fail('[Browser][cordova.js][readConfig] Could not XHR config.xml: ' + JSON.stringify(e));
}

Answer 2

I meet the problem when I run command
ionic cordova build browser
and gulp wrong build content to the serve,
wwwunber platforms/browser is the correct one
the wwwunder project folder is wrong one

Answer 3

In my case I am launching my app like the following
http://1.2.3.4/MyApp.BETA/
I think a better approach is to assume current directory instead of root. Therefor the fix should be:
xhr.open("get", "./config.xml", true);
Where is the source of this cordova.js?
Who should be notified to fix this? Cordova?
Thank you.